Closed
Bug 1468684
Opened 7 years ago
Closed 7 years ago
Note about viewport unit interactions with html/body overflow scrollbars seems incorrect
Categories
(Developer Documentation Graveyard :: CSS, enhancement, P1)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: me, Assigned: me)
References
()
Details
:: Developer Documentation Request
Request Type: Correction
Gecko Version: unspecified
Technical Contact:
:: Details
On the page:
> Note: If the <html> and <body> elements are set as overflow:auto, space taken by scrollbars is not subtracted from the viewport, whereas it will be subtracted if set as overflow:scroll.
The note was introduced by teoli in December 2014: https://developer.mozilla.org/en-US/docs/Web/CSS/length$compare?to=713281&from=681187
As far as I can tell, and as all reason says to me, this note is just wrong. The scrollbar is inside the initial containing block, and will thus always be included. (I *wish* it was right, because the inclusion of the scrollbar makes vw and vh dangerously misleading, and in fact completely useless in many, possibly most, circumstances—which you can easily find many bitterly complaining of. Oh for another unit which excluded them.)
This is a significant enough matter that I wanted to check it here rather than just replacing the offending note with a caution that viewport scrollbars are included, and so vw will normally not do what you want. (It definitely needs such a warning.)
Below is sample HTML that demonstrates how 100vw always includes the viewport scrollbars:
<!doctype html>
<html class=o0><script>n=0</script>
<style>
:root, body { margin: 0 }
body { min-height: calc(100vh + 1px) } /* ensure a vertical scrollbar will be present */
.o0 button::after { content: " (current: initial)" }
.o1 button::after { content: " (current: auto)" }
.o2 button::after { content: " (current: scroll)" }
.o1, .o1 body { overflow: auto }
.o2, .o2 body { overflow: scroll }
</style>
<div style="width:100vw;background:#ffc">If this scrolls horizontally, 100vw included the scrollbars. (When <code>overflow: scroll</code>, remember that the body scrollbar will be off the bottom of the viewport.)</div>
<button onclick="document.documentElement.className='o'+(++n%3)">Toggle <code>overflow</code> on :root and body</button>
|
||
Updated•7 years ago
|
Priority: -- → P2
|
|
||
Updated•7 years ago
|
Priority: P2 → P1
|
|
||
Updated•7 years ago
|
Assignee: nobody → me
|
Assignee | |
Comment 1•7 years ago
|
||
You are correct, it looks as though when the note was added it was correct, based on a 2012 resolution (https://drafts.csswg.org/css-values-3/#change-2012-vwh-scrollbars) however that resolution was reverted after the 2016 CR due to lack of implementation as you have noted. https://drafts.csswg.org/css-values-3/#changes
I have removed the note from the docs, thanks for spotting this!
|
||
Comment 2•7 years ago
|
||
Looks like this is fixed then. Closing.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•