[Webkit-unassigned] [Bug 52653] Media queries should ignore scroll bars when calculating width of viewport

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=52653

Fabian <milkservice at gmail.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |milkservice at gmail.com

--- Comment #2 from Fabian <milkservice at gmail.com> ---
Same issue here on Safari 13.1.1.

Execute this on a page with a scrollbar to verify:
```
window.matchMedia(`screen and (max-width: ${window.innerWidth-15}px)`).matches
```

This will return `true` on Safari (because the scrollbar has width 15px), but `false` on all other browsers.

It does not sound too bad, but this can have a very ugly impact:
Imagine your @media queries result in "Phone" layout being detected and when you open a full-screen modal dialog, you want to block scrolling on the body, and set "overflow: hidden" on it. This hides the scrollbar, which makes "document.body.clientWidth" wider, possibly now being detected as "Tablet" layout and causing other css @media rules to become active and mediaquery listeners to fire. In our case it caused the modal to being hidden immediately.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200624/aa86da65/attachment-0001.htm>