missing horizontal scrollbar with wide RTL body element |
||||
Issue descriptionWhat steps will reproduce the problem? 1. Visit https://output.jsbin.com/pevuhoc/quiet 2. Make the window narrow. What is the expected result? Horizontal scrollbar permits scrolling to "XYZ". What happens instead of that? No horizontal scrollbar. Right edge of box (with "XYZ") is inaccessible. Bisect says this regressed in M61 due to http://crrev.com/482950. The scrollbar appears correctly if "body" is replaced by either "html" or "#c" in this style rule: body { direction: rtl; width: 1000px; } I would expect horizontal overflow to produce a document-level scrollbar regardless of whether RTL direction is applied to the <html> element.
,
Oct 3 2017
,
Oct 3 2017
,
Oct 3 2017
This is a change which aligns with the spec and Gecko. This: <!DOCTYPE html> <body style="width:1000px;direction:rtl">Text</body> now behaves like this: <!DOCTYPE html> <html style="direction: ltr"> <body style="width:1000px;direction:rtl">Text</body> </html> The reason is that the body direction propagates to the viewport (affecting scrollbars) but not to the html element (per spec). Before http://crrev.com/482950 we (incorrectly) inherited the viewport style into the root element style instead of using the initial style, which meant the propagated rtl from body was bleeding into the root element style by accident. It's the combination of rtl on body and fixed width on body which triggers this.
,
Oct 3 2017
Does this break real content?
,
Oct 3 2017
I understand that the direction is not propagated to the <html> element, but I don't understand why that causes the scrollbar to disappear. The body should contribute to the layout overflow rect of the document regardless of the bounds or directionality of the <html> element. I don't know if any real content is broken. I noticed it because it broke a test case I had constructed for a different bug.
,
Oct 4 2017
Yes it contributes to the overflow of the viewport, but we don't make content overflowing to the right of the viewport edge of an rtl viewport accessible, just like we don't make content overflowing to the left of the viewport edge accessible in the ltr case.
This is showing the same effect for ltr (I've nested a few blocks to avoid any html/body magic):
<!DOCTYPE html>
<html style="direction:ltr">
<body>
<div>
<div style="direction:rtl">
<div style="direction:ltr; width: 2000px; height: 100px; background: lime"></div>
</div>
</div>
</body>
</html>
,
Oct 4 2017
Ok it makes sense now, thanks for explaining. I still think it's a surprising behavior. Usually when a style is propagated to the viewport, you can think of it as applying to all of the content. But I guess it's a spec bug and I see Firefox does the same thing. |
||||
►
Sign in to add a comment |
||||
Comment 1 by dtapu...@chromium.org
, Oct 3 2017Owner: r...@opera.com
Status: Assigned (was: Unconfirmed)