269682 - Layout doesn't get adjusted once image size is known

Status: RESOLVED FIXED

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Gus Heck]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

Yes I have read bug 41924 and bug 58662 (and all bugs that 41924 claims to block)

This is being reported as a bug on the following assumptions:

Firefox/Mozilla intends to support xhtml 1.0 with css.
Firefox/Mozilla should render the page the same on first and subsequent accesses.
Firefox/Mozilla intends to correctly render elements missing optional attributes
(specifically the image height and width tags) when the option to omit them is
excercised.

So if those assumptions are bad... pretend I never mentioned this...

The problem I am seeing (and will attach an example of) appears to be that when
a page is rendered for the first time, and the size of an image is not
specified, but the image is being downloaded (not blocked) the browser assumes
it has no size and lays out the page on that assumption. Once the image is
loaded it appears that some, but not all elements on the page are adjusted.

In the example I am submitting the image is contained within an H1 that does
appear to be properly rendered (the text and the image do not overlap) the
height of the div containig it also seems to be correctly recalculated. Even the
div directly below is properly adjusted, but the floating div (sidebar) to the
left which should be floating below the first two divs (header, and separator)
does not get repositioned. 

The result is that the sidebar overlaps the header and separator the first time
the page is loaded for a given session. subsequent loads know the size of the
picture (cached) and thus the page renders correctly.

Removing the image, or specifying height="100" causes correct rendering.

Certainly one wants to make a pass at rendering the page before image loading
completes since delaying rendering is going to be unresponsive, but once all
images are loaded the size of various elements can change, and it appears float
positions are not recalculated.

I debated whether this was image bug or a float bug, but it seems very closely
related to the discussions of what happens when images are not available or blocked.

Reproducible: Always
Steps to Reproduce:
1. unpack the supplied archive
2. close all instances of firefox
3. open firefox
4. browse to index.html from the supplied archive
5. click reload.

Actual Results:  
The layout changes. 

Expected Results:  
IMHO Reload should never change layout unless an element has been dynamically
replaced by the server or javascript.

Comment 1

[Gus Heck]

Attachment: An example page demonstrating the bug

And here is the example...

Comment 2

[Paul van Schayck]

I can confirm this for another case (I know, it's not really following any
standard, we're converting). But on the page you can see the same effect.

1. Open this page: http://www.meosource.com
2. Look at the box right of the green image in the middle.
3. See small curved images in the middle of the text.
4. Reload and observe the images gone, but now correctly placed as part of the
borders of the same box.

Comment 3

[Gus Heck]

The meosource example seems to be only showing a problem on some builds. Offline
conversation between Paul and I revealed that while I can't see it with the
build I used posting this bug, and I can't see the problem on meosource it with
my desktop which is still running

Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10

The screen shot he sent me clearly shows a problem that might be related. Both
versions of firefox that I use show the problem I reported when viewing my 
attached example. I can attach the screenshot if desired (it's 131k)

Here is a snipit from the end of our conversation:

> I still can't see the layout problem on your page. I cleared my cache,
> closed my browser, rebooted my computer, started firefox, cleared my
> cache again for good measure, and browsed to your page. (I like the
> design by the way)
>
> The attached screenshot is what I saw.... the corner gifs seem to be
> correctly placed.

Yup they are. In the screenshot I attached they aren't. After a reload
it will look good again.

> downloaded yesteday. What version are you using?

My own build:
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20041109 Firefox/1.0

Comment 4

[Gus Heck]

I have placed a copy of the bug at the url above for now I don't guarantee it
will be there forever, but it is esentially equivalent to the attachment.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Robert fixed this five days ago in bug 261064.  The fix will appear in Firefox 1.1.

Gus, thank you for the excellent bug report!