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)
A workaround is to use `transition-duration: 0s` see https://jsbin.com/buzoseq/9/edit?html,css,js,output
(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
<rdar://problem/97076922>