WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
ASSIGNED
Bug 158422
matchMedia late by 1px compared to CSS media query
https://bugs.webkit.org/show_bug.cgi?id=158422
Summary
matchMedia late by 1px compared to CSS media query
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
Details
Test reduction
(441 bytes, text/html)
2016-06-08 20:15 PDT
,
zalan
no flags
Details
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
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
<
rdar://problem/26672916
>
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.
Top of Page
Format For Printing
XML
Clone This Bug