133271 2014-05-25 18:15:17 -0700 vw units not calculated properly when scrollbars are present and overflow is not auto 2020-07-27 20:17:48 -0700 1 1 1 Unclassified WebKit Scrolling 528+ (Nightly build) Unspecified Unspecified NEW InRadar P2 Normal --- 1 patrick.arlt webkit-unassigned bjonesbe karan simon.fraser tamlyn webkit-bug-importer oldest_to_newest 1011609 0 patrick.arlt 2014-05-25 18:15:17 -0700 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. 1011612 1 232047 patrick.arlt 2014-05-25 18:17:10 -0700 Created attachment 232047 Reproduction case 1014768 2 bjonesbe 2014-06-11 09:17:10 -0700 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. 1044187 3 karan 2014-10-26 12:49:41 -0700 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."[1] 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. [1] http://dev.w3.org/csswg/css-values/#viewport-relative-lengths 1069399 4 tamlyn 2015-02-16 02:58:53 -0800 (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 1675504 5 webkit-bug-importer 2020-07-27 20:17:48 -0700 <rdar://problem/66196708> 232047 2014-05-25 18:17:10 -0700 2014-05-25 18:17:10 -0700 Reproduction case vw-reproduction.html text/html 494 patrick.arlt PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPlRlc3Q8L3RpdGxlPgog ICAgPHN0eWxlPgogICAgICBodG1sIHsKICAgICAgICBvdmVyZmxvdy14OiBoaWRkZW47CiAgICAg ICAgb3ZlcmZsb3cteTogc2Nyb2xsOwogICAgICB9CgogICAgICBib2R5IHsKICAgICAgICBtYXJn aW46IDA7CiAgICAgIH0KCiAgICAgICN3aWR0aDEwMCwgI3Z3MTAwIHsKICAgICAgICBiYWNrZ3Jv dW5kOiBncmF5OwogICAgICAgIG1hcmdpbi10b3A6IDFlbTsKICAgICAgICBoZWlnaHQ6IDIwcHg7 CiAgICAgIH0KCiAgICAgICN3aWR0aDEwMCB7CiAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgIH0K CiAgICAgICN2dzEwMCB7CiAgICAgICAgd2lkdGg6IDEwMHZ3OwogICAgICB9CiAgICA8L3N0eWxl PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgaWQ9IndpZHRoMTAwIj48L2Rpdj4KICAgIDxk aXYgaWQ9InZ3MTAwIj48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=