Bug 158422 - matchMedia late by 1px compared to CSS media query
Summary: matchMedia late by 1px compared to CSS media query
Status: ASSIGNED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 9
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: zalan
URL: http://jsbin.com/xasugogedu/1/edit?ht...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-06-06 09:14 PDT by iyel
Modified: 2023-06-29 05:09 PDT (History)
8 users (show)

See Also:


Attachments
Test reduction (320 bytes, text/html)
2016-06-08 20:09 PDT, zalan
no flags Details
Test reduction (441 bytes, text/html)
2016-06-08 20:15 PDT, zalan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description iyel 2016-06-06 09:14:51 PDT
@media (min-width: 720px) and (max-width: 989px) {
    #css {
        background-color: orange;
    }
}

window.matchMedia('(min-width: 720px) and (max-width: 989px)').addListener( ... );

At 720px background color will become orange, and only at 721px MediaQueryList will fire an event notifying that breakpoint changed
Comment 1 iyel 2016-06-07 01:00:36 PDT
Same in reverse order 
@media (min-width: 480px) and (max-width: 719px) {
    #css {
        background-color: orangered;
    }
}

Going from >720px down, on 719px color will be orangered and on 718 event will be fired
Comment 2 Radar WebKit Bug Importer 2016-06-07 07:41:39 PDT
<rdar://problem/26672916>
Comment 3 zalan 2016-06-08 20:09:57 PDT
Created attachment 280874 [details]
Test reduction

1. Size the window to 1001px
2. Open console (web inspector)
3. Resize the window below 1000px pixel by pixel.
4. Orange box disappears when window size is < 1000px
Expected result: console prints the window.innerWidth the same time when the orange box disappears
Actual result: console prints the window.innerWidth value soon after the window is resized again.
Comment 4 zalan 2016-06-08 20:15:37 PDT
Created attachment 280875 [details]
Test reduction

Expected result: "PASS if this...." text should show up the same time when the orange background disappears.
Comment 5 zalan 2016-06-09 13:13:23 PDT
It probably got regressed at r152568 where we started calling styleResolverChanged with  DeferRecalcStyle.
Now we call evaluateMediaQueryList() at the next layout -> matchMedia and mediaQuery are out of sync.
Comment 6 Ahmad Saleem 2022-09-03 04:13:19 PDT
I am not able to reproduce this bug in Safari Technology Preview 152 and when I resize window and orange box disappear, I get text "PASS..." similar to mentioned in Comment 04 and it works similar to other browser (Chrome Canary 107 and Firefox Nightly 106).

Just want to share updated testing results. Appreciate if someone can confirm, I am testing correctly and mark it accordingly. Thanks!