Bug 133271

Summary:

vw units not calculated properly when scrollbars are present and overflow is not auto

Product:

WebKit

Reporter:

Patrick Arlt <patrick.arlt>

Component:

Scrolling

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bjonesbe, karan, simon.fraser, tamlyn, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Reproduction case	none

Patrick Arlt

Reported 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.

Attachments
Reproduction case (494 bytes, text/html) 2014-05-25 18:17 PDT, Patrick Arlt	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Patrick Arlt

Comment 1 2014-05-25 18:17:10 PDT

Created attachment 232047 [details] Reproduction case

Bem Jones-Bey

Comment 2 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.

Karan Lyons

Comment 3 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."[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

Tamlyn

Comment 4 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

Radar WebKit Bug Importer

Comment 5 2020-07-27 20:17:48 PDT

<rdar://problem/66196708>

Note You need to log in before you can comment on or make changes to this bug.