168491 2017-02-16 19:16:30 -0800 AX: "(inverted-colors)" match sometimes fails on change 2017-04-10 01:08:57 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build All All NEW InRadar P2 Normal --- 163564 1 jcraig dino webkit-bug-importer oldest_to_newest 1278073 0 jcraig 2017-02-16 19:16:30 -0800 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. 1278074 1 webkit-bug-importer 2017-02-16 19:16:43 -0800 <rdar://problem/30570942> 1278075 2 jcraig 2017-02-16 19:17:07 -0800 Same test case from bug 163564: https://bugs.webkit.org/attachment.cgi?id=291870 1295764 3 jcraig 2017-04-09 01:28:03 -0700 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). 1295765 4 306608 jcraig 2017-04-09 01:34:38 -0700 Created attachment 306608 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. 1295924 5 jcraig 2017-04-10 01:08:22 -0700 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. 1295925 6 306669 jcraig 2017-04-10 01:08:57 -0700 Created attachment 306669 test case with workaround 306608 2017-04-09 01:34:38 -0700 2017-04-09 01:34:38 -0700 test case prm.htm text/html 826 jcraig PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHRpdGxlPkRlbW86IHByZWZlcnMtcmVkdWNl ZC1tb3Rpb24gbWVkaWEgcXVlcnk8L3RpdGxlPgoKPC9oZWFkPgo8Ym9keT4KCjxkaXYgaWQ9Imlu ZGljYXRvciI+Cgk8cD5QcmVmZXJzIFJlZHVjZWQgTW90aW9uOiA8c3BhbiBpZD0icHJtVmFsdWUi PnVuc3VwcG9ydGVkPC9zcGFuPjwvcD4KPC9kaXY+Cgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNj cmlwdCI+Cgp2YXIgbW90aW9uUXVlcnkgPSBtYXRjaE1lZGlhKCcocHJlZmVycy1yZWR1Y2VkLW1v dGlvbiknKTsKZnVuY3Rpb24gaGFuZGxlUmVkdWNlTW90aW9uQ2hhbmdlZCgpIHsKICAgIGlmICht b3Rpb25RdWVyeS5tYXRjaGVzKSB7CiAgICAgICAgLyogYWRqdXN0IG1vdGlvbiBvZiAndHJhbnNp dGlvbicgb3IgJ2FuaW1hdGlvbicgcHJvcGVydGllcyAqLwoJCXVwZGF0ZVZhbHVlVGV4dCgnb24n KTsKICAgIH0gZWxzZSB7IAogICAgICAgIC8qIHN0YW5kYXJkIG1vdGlvbiAqLwogICAgICAgIHVw ZGF0ZVZhbHVlVGV4dCgnb2ZmJyk7CiAgICB9Cn0KbW90aW9uUXVlcnkuYWRkTGlzdGVuZXIoaGFu ZGxlUmVkdWNlTW90aW9uQ2hhbmdlZCk7CmhhbmRsZVJlZHVjZU1vdGlvbkNoYW5nZWQoKTsgLy8g dHJpZ2dlciB0aGlzIG9uY2Ugb24gbG9hZCB0byBzZXQgdXAgdGhlIGluaXRpYWwgdmFsdWUKCmZ1 bmN0aW9uIHVwZGF0ZVZhbHVlVGV4dChzdHIpIHsKCXZhciBlbCA9IGRvY3VtZW50LmdldEVsZW1l bnRCeUlkKCdwcm1WYWx1ZScpOwoJaWYgKGVsKSB7CgkJZWwuaW5uZXJUZXh0ID0gc3RyOwoJfQp9 Cgo8L3NjcmlwdD4KCjwvYm9keT4KPC9odG1sPg== 306669 2017-04-10 01:08:57 -0700 2017-04-10 01:08:57 -0700 test case with workaround 168491_with_workaround.htm text/html 949 jcraig PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHRpdGxlPkRlbW86IHByZWZlcnMtcmVkdWNl ZC1tb3Rpb24gbWVkaWEgcXVlcnk8L3RpdGxlPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoKQG1l ZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uKSB7IC8qIEVtcHR5IGJsb2NrIHdvcmthcm91bmQg Zm9yIHdlYmtpdC5vcmcvYi8xNjg0OTEgKi8gfQoKPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KCjxk aXYgaWQ9ImluZGljYXRvciI+Cgk8cD5QcmVmZXJzIFJlZHVjZWQgTW90aW9uOiA8c3BhbiBpZD0i cHJtVmFsdWUiPnVuc3VwcG9ydGVkPC9zcGFuPjwvcD4KPC9kaXY+Cgo8c2NyaXB0IHR5cGU9InRl eHQvamF2YXNjcmlwdCI+Cgp2YXIgbW90aW9uUXVlcnkgPSBtYXRjaE1lZGlhKCcocHJlZmVycy1y ZWR1Y2VkLW1vdGlvbiknKTsKZnVuY3Rpb24gaGFuZGxlUmVkdWNlTW90aW9uQ2hhbmdlZCgpIHsK ICAgIGlmIChtb3Rpb25RdWVyeS5tYXRjaGVzKSB7CiAgICAgICAgLyogYWRqdXN0IG1vdGlvbiBv ZiAndHJhbnNpdGlvbicgb3IgJ2FuaW1hdGlvbicgcHJvcGVydGllcyAqLwoJCXVwZGF0ZVZhbHVl VGV4dCgnb24nKTsKICAgIH0gZWxzZSB7IAogICAgICAgIC8qIHN0YW5kYXJkIG1vdGlvbiAqLwog ICAgICAgIHVwZGF0ZVZhbHVlVGV4dCgnb2ZmJyk7CiAgICB9Cn0KbW90aW9uUXVlcnkuYWRkTGlz dGVuZXIoaGFuZGxlUmVkdWNlTW90aW9uQ2hhbmdlZCk7CmhhbmRsZVJlZHVjZU1vdGlvbkNoYW5n ZWQoKTsgLy8gdHJpZ2dlciB0aGlzIG9uY2Ugb24gbG9hZCB0byBzZXQgdXAgdGhlIGluaXRpYWwg dmFsdWUKCmZ1bmN0aW9uIHVwZGF0ZVZhbHVlVGV4dChzdHIpIHsKCXZhciBlbCA9IGRvY3VtZW50 LmdldEVsZW1lbnRCeUlkKCdwcm1WYWx1ZScpOwoJaWYgKGVsKSB7CgkJZWwuaW5uZXJUZXh0ID0g c3RyOwoJfQp9Cgo8L3NjcmlwdD4KCjwvYm9keT4KPC9odG1sPg==