Bug 242510

Summary:	Render issue with CSS media-query targeting prefers-reduced-motion and with reduce motion enabled
Product:	WebKit	Reporter:	Stuart Colville <stuart>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	cfleizach, dante3333, dino, graouts, jcraig, mmso, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Other
Hardware:	All
OS:	Unspecified

Description Stuart Colville 2022-07-08 08:52:25 PDT

Style that disables animations using a media query with `@media (prefers-reduced-motion: reduce)`, is somehow causing an element previously hidden by `visibly: hidden` to not render when it is made visible. 


Steps to reproduce:

- Enable reduce motion (Settings -> Accessibility -> Display -> Check "reduce motion")
- Visit this test case: https://jsbin.com/buzoseq/7/edit?html,css,js,output

What happens:

- Note that the div is not displayed after 3 seconds

What should happen: 

- The div should be made visible after 3 seconds. 

The test case has a div which has `visibility: hidden` applied by a class. A setTimeout removes the class after 3 seconds which should make it visible. But in Safari it doesn't. This works as expected in the desktop versions of Firefox and Chrome.

Commenting out the prefers-reduced-motion CSS makes the div render.

This is reproducible on: 

- Release 148 (Safari 16.0, WebKit 17614.1.17.1) (Apple Silicon)
- Version 15.5 (17613.2.7.1.8) (Apple Silicon)
- Safari IOS 15.5 as well as all other browsers tested on IOS (Chrome/Firefox/Brave)

Comment 1 Stuart Colville 2022-07-08 10:15:58 PDT

A workaround is to use `transition-duration: 0s` see https://jsbin.com/buzoseq/9/edit?html,css,js,output

Comment 2 Stuart Colville 2022-07-11 06:04:27 PDT

(In reply to Stuart Colville from comment #1)
> A workaround is to use `transition-duration: 0s` see
> https://jsbin.com/buzoseq/9/edit?html,css,js,output

Actually, this workaround isn't viable, a non-zero value is still needed otherwise transition events don't fire. 

`transition-duration: 0.01ms` seems to work (and still fires ontransitionrun and ontransitionend whereas `transition-duration: 0.001ms` causes the visibility issue (though this needs further testing - it works on desktop Safari).

Here's an updated test-case using `transition-duration: 0.01ms` and showing the events firing: https://jsbin.com/buzoseq/19/edit?html,css,js,console,output

Comment 3 Radar WebKit Bug Importer 2022-07-15 08:53:14 PDT

<rdar://problem/97076922>