Element with scrollbar does not apply padding to content
Categories
(Core :: Layout: Scrolling and Overflow, defect)
Tracking
()
People
(Reporter: wesruv, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
Steps to reproduce:
Here is a Codepen showing the issue with screenshots from Chrome and FF:
https://codepen.io/wesruv/full/dyzxMzW
Essentially a div with overflow: auto and padding-right, with content that forces a horizontal scrollbar.
Actual results:
Element scrolls, content touches the right side of the box even when scrolled all the way to the right.
Expected results:
When scrolled all the way to the right, the content should have the extra space from the padding-right on the container.
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 2•2 years ago
|
||
Reduced testcase (scroll to the far right, see whether there's any space between the last "a" and the border):
data:text/html,<div style="border: 1px solid black; overflow-x:scroll; overflow-y:hidden; padding: 40px; width: 100px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
|
||
Comment 3•2 years ago
|
||
This is an area where there's been active discussion at the CSS Working Group over the past year (in part because there's historical under-defined-ness here, with disagreeing and in some cases incoherent-seeming behavior in implementations).
This is essentially tracked in bug 1700858. The CSSWG actually initially resolved to match Firefox's behavior here, per bug 1700858 comment 3, but then changed course and Google is apparently doing some experiments on a hybrid approach that would still produce your expected rendering in this case (I think), per bug 1700858 comment 4.
|
|
||
Comment 4•2 years ago
|
||
(We'll implement whatever behavior ends up being agreed upon, but I think right now we're waiting on updates from the CSSWG / Google folks.)
Fair, any way for me to advocate for my expectation for how it "should" work?
|
|
||
Comment 6•2 years ago
•
|
||
You're welcome to follow along at https://github.com/w3c/csswg-drafts/issues/129 and chime in if you'd like, but the discussion is already a bit long and I think that at this point, everyone is on the same page and shares your preference for how it "should" work in your particular scenario, so I'd suggest holding off on adding advocacy comments there.
The to-be-decided stuff there is about some related subtler cases, where we want to also apply this intuition about how it "should" work. In these related cases, there are open questions about whether the behavior-change would introduce scrollbars in substantial amounts of existing web content (by suddenly causing padding to be honored & scrollable, which previously was not scrollable in any browser).
Some Google engineers are doing experiments in Chrome to probe for any such potentially-broken-content (since Chrome's behavior will also be changing on those subtler cases). We're holding off on shipping a change until those edge cases have been worked out, so that our patch here ends up addressing the right set of things (in addition to fixing your use-case).
Ahhh, perfect!
Thanks so much for the help and information! <3
Description
•