Open Bug 374675 Opened 13 years ago Updated 9 years ago

{inc} overflow:auto and overflow:hidden when moved via javascript/js cause display glitches


(Core :: Layout, defect)

Not set




(Reporter: memso, Unassigned)


(Keywords: testcase)


(1 file)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv: Gecko/20070219 Firefox/
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv: Gecko/20070219 Firefox/

Using absolute positioned content that has overflow hidden set, an inner div with no overflow setting and finally an inner div in that div with overflow auto, the overflown area in the inner-most div is not visible, but if you move the absolute positioned content, the area where the overflow would have been seen is grabbed from the browser page and moved along with it, which looks really messed up! This is hard to explain without seeing it, so see the test case for details.

Reproducible: Always

Steps to Reproduce:
1. Here is my sample data structure:
<div id="AbsoluteContent"
  style="position: absolute; left: 200px; top: 0px; width: 200px; height: 200px; border: 1px #000000 solid; overflow: hidden;">
  <div id="Inner1" style="width: 200px; height: 200px;">
    <div id="Inner2" style="width: 200px; height: 1000px; background-color: #0000FF; overflow: auto;"></div>
Notice how Inner2 is 200x1000 even though the outer two divs are 200x200
2. Using javascript, move the content. 
Actual Results:  
The region on the browser where the overflow would have occurred (but was hidden) ends up actually visually moving with the content! If you have text, images, etc. where the overflow would have occurred, it is copied to the new location.

Expected Results:  
Only the div region and it's content should have moved

I have tested this in the version mentioned above (FF v2.0.0.2 in WinXP x64), as well as in Minefield 3.0a3pre (Nightly Build for 03-09-2007), both cause the same problems.

While searching, bug 353795 seemed similar but not the same. No clue if there is any relation whatsoever.

A work around to this problem is to NOT put overflow: auto in Inner2 since it doesn't work there properly (it does if you put it in Inner1 however).
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a3pre) Gecko/20070321 Minefield/3.0a3pre ID:2007032103 [cairo]
I see this too.
Component: General → Layout
Keywords: testcase
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
Severity: minor → normal
Summary: overflow:auto and overflow:hidden when moved via javascript/js cause display glitches → {inc} overflow:auto and overflow:hidden when moved via javascript/js cause display glitches
I think this is a variation of the CSS bug I have found so I continue here rather than starting a new thread. 

If you use overflow:auto and position:absolute on a div and resize the window, you're going to get a messed up page. Especially if the div has visibility:hidden, the effect is really weird. 

I have made sample code that clearly demonstrates the bug:

<h1>Mozilla CSS overflow: auto Bug Demo</h1>
<em>Here is a demonstration of a overflow: auto bug in Mozilla Firefox A div is placed with absolute position. It can corrupt the page by 
shifting pixels up and down. The bug becomes obvious when resizing the 
window; then the div is seen by the underlying content being corrupted.</em>
<div style="left: 30%; overflow: auto; width: 300px; height:200px; 
position: absolute; top: 10%;" >
<strong>Here's the div. If you don't see bug, resize the 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nisi 
nunc, dapibus vel, lobortis non, adipiscing nec, urna. Quisque augue. Nam 
sed est quis massa consectetuer luctus. Fusce velit risus, varius gravida, 
hendrerit at, viverra at, lacus. Nulla lorem. Ut nec tortor. Suspendisse 
scelerisque lorem quis purus. Proin ut elit ac libero convallis volutpat. 
Sed varius, lectus a molestie vestibulum, neque quam faucibus ipsum, ac 
dictum enim tortor sit amet velit. Sed dignissim ultrices diam. Aliquam 
erat volutpat. Sed non felis in velit iaculis consectetuer. Class aptent 
taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
hymenaeos. Nulla a neque quis erat gravida porttitor. Proin pede sapien, 
consequat eu, pretium in, congue eu, lacus. Nulla facilisi. Praesent magna 
felis, dignissim non, posuere placerat, tristique sit amet, felis. Ut 
The display glitches appear on trunk as well.

overflow is really broken, the problem in comment #3 is already filed somewehere else.
Ever confirmed: true
OS: Windows Server 2003 → All
Hardware: x86 → All
Works for me - Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2a1pre) Gecko/20090805 Minefield/3.6a1pre
WFM too with both branch and trunk:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2b6pre) Gecko/20091211 Namoroka/3.6b6pre

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a1pre) Gecko/20091211 Minefield/3.7a1pre
You need to log in before you can comment on or make changes to this bug.