|Summary:||vw units not calculated properly when scrollbars are present and overflow is not auto|
|Product:||WebKit||Reporter:||Patrick Arlt <patrick.arlt>|
|Severity:||Normal||CC:||bjonesbe, karan, tamlyn|
|Version:||528+ (Nightly build)|
Description Patrick Arlt 2014-05-25 18:15:17 PDT
In Safari 7+ if you Mac is set to always show scroll bars vw units are calculated againt the area of the screen that includes scrollbars. The CSS spec http://dev.w3.org/csswg/css-values/#viewport-relative-lengths says that "when the value of overflow on the root element is auto, any scroll bars are assumed not to exist." and "Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport." So if I set the overflow property on the <html> element to something like overflow:scroll it should exclude the width of the scrollbar for the vw unit. In my attached reproduction case with scrollbars always enabled (http://osxdaily.com/2011/08/03/show-scroll-bars-mac-os-x-lion/) the 2 divs should have equal widths but do not. This also appears to be a bug in chromium/blink which I filed here https://code.google.com/p/chromium/issues/detail?id=377331. Firefox implements the spec correctly. IE 11 also has this bug.
Comment 1 Patrick Arlt 2014-05-25 18:17:10 PDT
Created attachment 232047 [details] Reproduction case
Comment 2 Bem Jones-Bey 2014-06-11 09:17:10 PDT
Looking at the spec, I don't come to the same conclusion that you do. The spec says that scrollbars are assumed not to exist if overflow is set to "auto". However, in your example, you have set overflow to "scroll". So I don't understand why you would expect the scrollbars to be ignored in your example.
Comment 3 Karan Lyons 2014-10-26 12:49:41 PDT
Scrollbars are supposed to *not* be ignored when overflow is set to scroll. Currently, they're ignored no matter what overflow's set to, which is in defiance of the viewport units' spec. By way of example, assume a viewport 200px wide by 100px tall. If the root element is set to "overflow: auto;", 100vw should be 200px, and 100vh 100px. This is because the scrollbars should be ignored, regardless of whether they're present. For this case all browsers are doing the right thing. Here's what that looks like, in crude ascii form: +------------------+ | | | viewport | | 200x100 | | | | | +------------------+ Now set "overflow: scroll;". Let's say our scrollbars are 20px wide. So if scrollbars are visible, the browser's viewport is now 20px less in whichever dimension has a scrollbar. If its in both dimensions, our layout is now as such: +----------------+-+ | viewport | | | 180x80 | | | | | +----------------+ | | scrollbars | +------------------+ Currently, Webkit reports the viewport as *still* being 200x100. Which makes viewport units close to useless when scrollbars are present: 100 units no longer equals 100% of the viewport, but some amount more. The spec is very clear about this being incorrect behavior. It states, "The viewport-percentage lengths are relative to the size of the initial containing block." and only a couple sentences later says, "Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport." Right now the initial containing block's (the document's root element in this case) size is *not* being affected by the presence of scrollbars on the viewport, like the spec states it should be.  http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
Comment 4 Tamlyn 2015-02-16 02:58:53 PST
(In reply to comment #2) > Looking at the spec, I don't come to the same conclusion that you do. See this discussion from the CSS Working Group for clarification: http://lists.w3.org/Archives/Public/www-style/2013Jan/0616.html > viewport units in case of 'overflow:auto' are sized as if scrollbar is *not* present (even if they are) > In case of 'overflow: scroll', scrollbars are accounted for in calculating viewport units