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

NEW
Unassigned

Status

()

Core
Layout
2 years ago
2 years ago

People

(Reporter: mstange, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Created attachment 8744655 [details]
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.
Interesting.

Edge matches Gecko, though, based on:
http://dbaron.org/css/test/2016/bug1267004-intersect
http://dbaron.org/css/test/2016/bug1267004-nointersect
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
(and so that we can move towards interoperability, in one direction or the other)
Status: UNCONFIRMED → NEW
Ever confirmed: true
You need to log in before you can comment on or make changes to this bug.