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.
<rdar://problem/30570942>
Same test case from bug 163564: https://bugs.webkit.org/attachment.cgi?id=291870
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).
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.
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.
Created attachment 306669 [details] test case with workaround