441014 - Overflow:hidden IGNORED when container has no width/height set and contents change dinnamically

Status: RESOLVED DUPLICATE of bug 409736

(Core :: Layout, defect)

Description

[Caio]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0

FIREFOX 3 W3C FAIL ON DHTML OVERFLOW:HIDDEN

As seen on the site reported, a DIV with NO WIDTH but with an OVERFLOW:HIDDEN will IGNORE THE OVERFLOW:HIDDEN iff the contents CHANGE (DHTML). When the page loads, everything works fine as expected (the DIV, since it has no specific width, will eat up all the space AVAILABLE, and if the CONTENTS are larger, it will respect the OVERFLOW:HIDDEN and hide the extra content as per definition of overflow:hidden (see the given URL with javascript turned off to confirm this).

However, as soon as javascript changes the content of said DIV dinamically, if the content is larger than the container, it will EXPAND, totally IGNORING THE OVERFLOW:HIDDEN. The page mentioned (if javascript on) will load thumbnails and set new dimensions for the INNER containers (a lot larger than originally). If OVERFLOW:HIDDEN was respected (as Firefox 2 did), there would be NO CHANGE in the appearance of the site at all, regardless of what the javascript do inside that div. However, FIREFOX 3 IGNORES OVERFLOW:HIDDEN and EXPANDS the container as if it had no overflow:hidden at all.

Note this happens ONLY if the DIV has NO width. The PROPER behaviour if no width is set but overflow:hidden is specified, is to RETAIN the width/height (i.e. ignore any changes inside the DIV), NOT change it's width/height as needed (thus, as if overflow:none is set)

This is a SERIOUS ISSUE because liquid DHTML / AJAX webpages will have broken layouts and THERE IS NO SOLUTION even using hacks. The page mentioned have a fixed width but it allows users to switch to liquid layout, that's why the DIV has no width set.

This is a major problem and FIREFOX 3 is a step down on the web standards progress if this is not fixed! 


Reproducible: Always

Steps to Reproduce:
1. Create a DIV with NO WIDTH/HEIGHT specified, and specify OVERFLOW:HIDDEN (parent DIV)
2. Add another DIV inside this one DIV (child DIV)
3. Change (enlarge) the child DIV beyond the original width/height of the parent DIV

<div style="overflow:hidden">
  <div id="child"></div>
</div>
<script>
  // using prototype $ function to get a component
  $('child').style.width = "3000px"; // <-- should have no visible consequence, but the parent div will also expand 3000px and make a scroll bar appear = WRONG!
</script>
Actual Results:  
The parent DIV will ENLARGE to fix the child DIV even though it's set to OVERFLOW:HIDDEN

Expected Results:  
The parent DIV, having overflow:hidden, should IGNORE CHANGES INSIDE, thus IGNORE the enlarging of the child DIV (that's the whole point of overflow: hidden)

This bug is NEW to Firefox 3. Although rare and CSS related, this is a SERIOUS BUG because DHTML/ajax sites are on the rise and this will break layout on any site running advanced features, and it seams an easy fix: overflow:hidden MAKES THE CONTAINER IGNORE CHANGES INSIDE OF IT, PERIOD.

Browsers with same bug: IE6, Safari (all)
Browsers which behave correctly, respecting overflow:hidden: Firefox 2.*, IE7, IE8 beta, Opera (all), Netscape (all)

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase from Description

This is the testcase from the description.  It works fine for me.

There seems to be something different going on at the URL -
could you attach a minimal testcase that demonstrates the problem? Thanks.

Comment 2

[Caio]

Attachment: Bug

this will bug on FF3

Comment 3

[Caio]

Attachment: forgot overflow:hidden

Forgot to put the overflow:hidden on parent

Comment 4

[Caio]

Testcase from Description doesn't work because body child elements cannot enlarge (inherit width from body?), though I tryed with other DIV and it also does not enlarge, only inside a table.

Why being inside a TD makes the DIV ignore the overflow:hidden, but being inside another DIV it doesn't is beyond me. Nevertheless, my latest attachment shows the bug. The parent DIV with overflow:hidden enlarges itself (and the TD containing it).

I run other tests and even adding overflow:hidden to do TD won't do. FF2 behaves correctly, so does IE7/8 and Opera.

So far seams the problem happens only inside tables. I tryed simulating the table with floating divs LEFT and RIGHT and the bug did not happen, thus pointing that the issue happens only to DIV's inside a cell.

Comment 5

[philippe (part-time)]

Based on the test case in comment 3, that is the same issue as in bug 409736.

Comment 6

[philippe (part-time)]

(In reply to comment #5)
> Based on the test case in comment 3, that is the same issue as in bug 409736.

2 additional notes:

1. Safari/WebKit display the same way as Gecko 1.9/Fx3 - as expected :-)
2. on the original site: #iface_content > table {table-layout:fixed} solves the issue - again, as expected.

duping this.