257552 - {inc}CSS Floats do not layout properly when page is first viewed or after the cache is cleared.

Status: REOPENED

(Core :: Layout: Floats, defect)

Description

[Michael Grubb]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a3) Gecko/20040830 MultiZilla/1.6.4.0b
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a3) Gecko/20040830 MultiZilla/1.6.4.0b

In the page at http://www.naholos.com/, The "Login" block should appear below
the "Site Navigation" block and to the left of the main content body.  Also the
"copyright" block at the bottom should appear at the very bottom of the page. 
In the example the div borders have been turned on for clarity of the problem. 
When the page first loads or after the cache is cleared the "Login" block will
appear on top of the "Site Navigation" block.  Also the "copyright" block creeps
up into the main content body.

Reproducible: Always
Steps to Reproduce:
1. Load the site
2. Notice the funky layout
3. Refresh the page
4. Notice the proper layout
5. Clear the cache
6. Refresh the page
7. Notice the funky layout is back

Actual Results:  
The actual results are as outlined above.

Expected Results:  
The browser should have layed the page out properly to begin with.  If it can do
it cached it stands to reason that it should be able to do it uncached.

This bug is present in at least every version of Mozilla 1.7 for linux or winxp.
This bug is also present in Firefox 0.9.1 for linux (at least), but Firefox
0.9.3 for winxp works fine, it does not seem to have this bug.  I apologize for
the sketchy information of the firefoxes.

Comment 1

[Doug Wright]

WFM Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.3) Gecko/20040829
Firefox/0.9.1+

Comment 2

[Boris Zbarsky [:bzbarsky]]

Minimal testcase (probably using hyatt's trick) needed.

Comment 3

[Michael Grubb]

How do I go about creating a test case?

Comment 4

[Jason Barnabe (np)]

(In reply to comment #3)
> How do I go about creating a test case?

http://www.mozilla.org/newlayout/bugathon.html
Hyatt's trick http://weblogs.mozillazine.org/hyatt/archives/2003_08.html#003963

This WFM on Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a5)
Gecko/20041018 Firefox/0.9.1+

Comment 5

[marco]

Here's a minimal test case that is always reproducible (last several alpha/beta/
final releases of Firefox).

http://earthli.com/users/marco/bugs/firefox_float_refresh_bug.html

An easier way to reproduce the bug is to do the following (instead of the 
previous instructions):

1. Load the site
2. Notice the funky layout
3. Refresh the page
4. Notice the proper layout
5. *** Shift-Refresh the page *** (replaces clearing the cache)
6. Notice the funky layout is back

Can anyone confirm? This test case is reduced from the home page of the given 
site:

http://earthli.com

Comment 6

[Andreas Lange]

Confirming based on todays trunk. I'm uncertain what (if any) part the
"display:table" on the containing <div> plays though.

Comment 7

[Andreas Lange]

Attachment: Minimal testcase

Thanks for the simplified testcase! Attaching (a slightly modified version of)
it to not depend on external url.

Comment 8

[marco]

(In reply to comment #6)
> I'm uncertain what (if any) part the "display:table" on the containing <div> 
plays though.

If you leave it off, Firefox formats correctly.

Comment 9

[Andreas Lange]

(In reply to comment #8)

> > I'm uncertain what (if any) part the "display:table" on the containing <div> 
> plays though.
> 
> If you leave it off, Firefox formats correctly.

Oh yes, that I noticed. What I really ment was something along: Since the
testcase depends on "display:table", I wonder if the testcase displays a
specific "display:table"-reflow problem or if it is a generic case of
img-inc-reflow problem. In any case, it is a very small and nice testcase. :-)

Comment 10

[Steve England [:stevee]]

Weirdness observed with:
-  Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a1) Gecko/2006120606 Minefield/3.0a (pre-reflow branch)
(two images are stacked vertically, refresh causes them to be aligned horizontally)

No weirdness observed with:
- Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a1) Gecko/2006120804 Minefield/3.0a1 (post-reflow branch)
(two images are aligned horizontally, refreshing page does not change layout)

-->RESOLVED FIXED ?

Comment 11

[Andreas Lange]

Attachment: reftests from testcase

The gradient image in might be too small to display the problem reliably on more modern computers, but I think it will do.

Comment 12

[Ryan VanderMeulen [:RyanVM]]

How are those two tests any different from each other?

Comment 13

[Andreas Lange]

-    <div style="display: table">
+    <div>

(See comment 8/9)

Another way to make the ref would be to keep the display-table on the div and remove the float styling of the images.

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Attachment: Modified tests

Check these out. With this test, I'm adding the images to the DOM after the fact, forcing a reflow. This causes the testcase to fail 100% pre-reflow branch (you can reload to your heart's content and it will still misrender). Here's the interesting thing - this test is ALSO failing for me on reload with a current trunk build. When I load it the first time, it displays properly, but if I refresh the page, it reverts to the wrong layout.

dbaron - any idea what's going on?

Comment 15

[Ryan VanderMeulen [:RyanVM]]

Attachment: Diagonal gradient image

Comment 16

[Ryan VanderMeulen [:RyanVM]]

Attachment: New testcase

OK, I'm official unconvinced that this bug is truly fixed on the post-reflow branch trunk. The testcase I'm posting now fails 100% pre-reflow branch. However, post-reflow branch it still fails when reloading the page.

Comment 17

[Ryan VanderMeulen [:RyanVM]]

Reopening given the new testcase

Comment 18

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

I'm not sure what to look for in the testcase to tell whether the bug is present.