Bug 158422

Summary: matchMedia late by 1px compared to CSS media query
Product: WebKit Reporter: iyel <yeldinov>
Component: CSSAssignee: zalan <zalan>
Status: ASSIGNED    
Severity: Normal CC: ahmad.saleem792, dino, jonlee, karlcow, simon.fraser, webkit-bug-importer, yeldinov, zalan
Priority: P2 Keywords: InRadar
Version: Safari 9   
Hardware: Mac   
OS: OS X 10.11   
URL: http://jsbin.com/xasugogedu/1/edit?html,js
Attachments:
Description Flags
Test reduction
none
Test reduction none

iyel
Reported 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
Attachments
Test reduction (320 bytes, text/html)
2016-06-08 20:09 PDT, zalan
no flags
Test reduction (441 bytes, text/html)
2016-06-08 20:15 PDT, zalan
no flags
iyel
Comment 1 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
Radar WebKit Bug Importer
Comment 2 2016-06-07 07:41:39 PDT
zalan
Comment 3 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.
zalan
Comment 4 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.
zalan
Comment 5 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.
Ahmad Saleem
Comment 6 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!
Note You need to log in before you can comment on or make changes to this bug.