Bug 168491 - AX: "(inverted-colors)" match sometimes fails on change
Summary: AX: "(inverted-colors)" match sometimes fails on change
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Dean Jackson
Keywords: InRadar
Depends on: 163564
  Show dependency treegraph
Reported: 2017-02-16 19:16 PST by James Craig
Modified: 2017-04-10 01:08 PDT (History)
1 user (show)

See Also:

test case (826 bytes, text/html)
2017-04-09 01:34 PDT, James Craig
no flags Details
test case with workaround (949 bytes, text/html)
2017-04-10 01:08 PDT, James Craig
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description James Craig 2017-02-16 19:16:30 PST
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.
Comment 1 Radar WebKit Bug Importer 2017-02-16 19:16:43 PST
Comment 2 James Craig 2017-02-16 19:17:07 PST
Same test case from bug 163564:
Comment 3 James Craig 2017-04-09 01:28:03 PDT
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).
Comment 4 James Craig 2017-04-09 01:34:38 PDT
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.
Comment 5 James Craig 2017-04-10 01:08:22 PDT
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.
Comment 6 James Craig 2017-04-10 01:08:57 PDT
Created attachment 306669 [details]
test case with workaround