Bug 242510 – Render issue with CSS media-query targeting prefers-reduced-motion and with reduce motion enabled

• Status: NEW
• Component: CSS

[Stuart Colville]

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)

[Stuart Colville]

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

[Stuart Colville]

(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

[Radar WebKit Bug Importer]

<rdar://problem/97076922>