[Webkit-unassigned] [Bug 242510] New: Render issue with CSS media-query targeting prefers-reduced-motion and with reduce motion enabled

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=242510

            Bug ID: 242510
           Summary: Render issue with CSS media-query targeting
                    prefers-reduced-motion and with reduce motion enabled
           Product: WebKit
           Version: Other
          Hardware: All
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: stuart at muffinresearch.co.uk

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)

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220708/39e7d9d8/attachment.htm>