1419142 - Scrollbars being created when not required

Status: NEW

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[apalmer]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

Look at this post on reddit.  The code section of the original post has two virtical scrollbars.  When you view this in Chrome it has none.
The scrollbars also do nothing when you try to use them.

https://www.reddit.com/r/PowerShell/comments/7e8tkt/help_with_a_script_to_copy_to_a_local_folder_and/


Actual results:

Scrollbars are being rendered that are not required.


Expected results:

No scrollbars

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 2

[Mats Palmgren (inactive)]

https://drafts.csswg.org/css-overflow/#scrolling-direction
"Due to Web-compatibility constraints (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output), UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side)."

I read that as specifying the behavior in Firefox, not Chrome.

David, since you're listed as an editor of that spec, can you clarify please?

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So my understanding is that the difference you're talking about is that Gecko does what the spec text in comment 2 says, whereas what Chromium does is that if a box is entirely above the scrollport or entirely to the right of the scrollport, then that box does not contribute to scrollable overflow in either dimension.

I recall raising that issue at some point, but I can't find it.

The text you cite was added in https://hg.csswg.org/drafts/rev/01821f08744d524d6d532462444f3ef7912198e6 so it doesn't necessarily imply that it was intended to take a position on one versus the other.

Did you check what any browsers other than Chrome and Gecko did?

Comment 4

[Mats Palmgren (inactive)]

Edge has two scrollbars like Firefox, Safari has none like Chrome.

Comment 5

[Mats Palmgren (inactive)]

https://github.com/w3c/csswg-drafts/issues/2006#issuecomment-353124462
"RESOLVED: Specify the webkit/blink behavior for issue #2006"

The discussion mentions that Blink/WebKit are inconsistent in some
cases though, so I think we need to wait for the updated spec text
before attempting to implement this.

Comment 7

[Daniel Holbert [:dholbert]]

Canceling the ni from comment 2, since it was answered via a spec update that makes a scrollport exclude boxes "wholly outside its block-start or inline-start padding edges" from contributing scrollable overlow.
https://drafts.csswg.org/css-overflow-3/#scrollable

Comment 9

[Daniel Holbert [:dholbert]]

ni=me to come up with some testcases and/or spec analysis to see if this is just direct children vs. nested descendants of partially-in-scrollport children.

Comment 10

[Daniel Holbert [:dholbert]]

Aha, looks like I came up with a testcase of this sort in bug 1770516 already (see bug 1770516 comment 3 - 4).

Testcase: https://bug1770516.bmoattachments.org/attachment.cgi?id=9279349

Based on the first part there (which is expected to create a scrollbar & does do so in all browsers), It looks like we're OK to keep doing our "union the descendants" approach, and we only need to consider whether the overflow-rect is wholly outside the scrollport at the topmost level.