Bug 168491 – AX: "(inverted-colors)" match sometimes fails on change

• Component: CSS
• Status: NEW

[James Craig]

The (inverted-colors) media feature from bug 163564 appears to match most of the time, for example, when toggling the setting on macOS or iOS if Safari is in the foreground. Or when using the Accessibility Inspector to change the setting.

Some times when it does not match:
- if you exit Safari on iOS and change via the settings app, the match does not fire when the app is returned to the foreground.
- if you lock the device or otherwise background Safari, the match does not fire again in Safari until you either 1) reload the page, or 2) rotate the device to trigger another orientation match change.

Once you reload the page, the subsequent changes fire appropriate matches. It seems like WebKit is trying to be efficient and not listen for match notifications if it thinks nothing should have changed. If you change the device orientation while it's in this state it seems to work as expected until the app is backgrounded again.

[Radar WebKit Bug Importer]

<rdar://problem/30570942>

[James Craig]

Same test case from bug 163564:
https://bugs.webkit.org/attachment.cgi?id=291870

[James Craig]

Also reproducible in desktop contexts. The change event won't fire initially, but does when another queryable layout change happens (e.g. resizing the window).

[James Craig]

Created attachment 306608 [details]
test case

1. Load attached test case on Mac.
2. Toggle "Reduce Motion" setting in SysPrefs > Accessibility > Display.
3. Notice the on/off indicator does not change immediately.
4. Resize the window a bit.
5. Notice "prefers reduced motion" value is updated then.

[James Craig]

Workaround identified. If you put an empty CSS @media block in, the JavaScript works as expected.

@media (prefers-reduced-motion) { /* Empty block workaround */ }

Including both test cases with and without the workaround.

[James Craig]

Created attachment 306669 [details]
test case with workaround