1267004 - Offscreen elements cause scrollable overflow even if they are completely beyond the top or left edge of the scrollable area

Status: NEW

(Core :: Layout, defect)

Description

[Markus Stange [:mstange]]

Attachment: testcase

This testcase has a horizontal scrollbar in Firefox, but not in Safari or Chrome.

It contains a div that has the style
position: absolute; top: -100px; left: 10000px; width: 1px; height: 1px;

This div is completely clipped away and can't be made visible by scrolling because it's entirely above the top edge of the document. Should it be added to the scroll frame's scrollable overflow?


I encountered this issue on 
http://www.gamasutra.com/view/feature/131997/games_demystified_super_mario_.php due to what seems to be a tracking iframe. This page has a useless horizontal scrollbar in Firefox but not in Chrome. I wouldn't be surprised if the "position: absolute; top: -100px;" code came from a popular ad framework, because I've seen unnecessary horizontal scrollbars in Firefox lots of times on many different sites.

In the gamasutra case, the tracking iframe is positioned just outside the right edge of the page. This is due to an assembly like this:
<div>
  <div style="float: left; width: 100%;">Footer content</div>
</div>
<iframe style="position: absolute; top: -100px;"></iframe>
with the iframe being put just to the right of the floated footer element.

Comment 1

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

Interesting.

Edge matches Gecko, though, based on:
http://dbaron.org/css/test/2016/bug1267004-intersect
http://dbaron.org/css/test/2016/bug1267004-nointersect

Comment 2

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

It's probably worth bringing this up on www-style so that it can be defined in https://drafts.csswg.org/css-overflow/#overflow-concepts

Comment 3

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

(and so that we can move towards interoperability, in one direction or the other)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (offscreen wide element with vertically-overflowing reasonable-width child)

This needs some investigation/speccing to determine what Chrome is actually doing here.

As shown in mstange's original testcase, Chrome doesn't include fully-offscreen abspos elements in their scrollable overflow. But if those elements include a tiny descendant that overlaps the viewport at all (as in this testcase that I'm attaching now), then Chrome shows a horizontal scrollbar. This indicates that (for Chrome) the offscreen element does contribute its full scrollable-overflow-width to the viewport's scrollable overflow in this case.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (offscreen element has position:relative rather than position:absolute)

One other case to consider: offscreen relatively-positioned content. Chrome and Firefox agree that this does create a horizontal scrollbar. It's only offscreen abspos (and presumably fixed-pos) content that doesn't create a scrollbar in Chrome.

Comment 8

[Daniel Holbert [:dholbert]]

Note, we've gotten three webcompat.com reports of this issue for "inoreader.com" in particular:
https://webcompat.com/issues/51473
https://webcompat.com/issues/97471
https://webcompat.com/issues/91796

Comment 9

[Thomas Wisniewski [:twisniewski]]

Moving the webcompat links to our webcompat knowledge bug for this issue, bug 1891089.