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 | ||
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)
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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>