245417 - images with css float flash/jump in upper left corner of frame as they are loaded

Status: RESOLVED FIXED

(Core :: Layout: Floats, defect)

Description

[David Valentine]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040514
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040514

Recently reworked page to fully exploit css, and div/span layout.

images with css float flash in upper left corner of frame as they are loaded.

This happens with both the HTML, and the xml with stylesheet version.

I have 0 cache size setting

Reproducible: Always
Steps to Reproduce:
1. draw area on map
2. click search
3. results page loads
4. images will flash in upper left corner as they are loaded.

Actual Results:  
images will flash in upper left corner as they are loaded.

Expected Results:  
images should not appear in upper left corner of frame, then be redrawn.

0 cache size.

Attaching, html rendering, xml, xml stylesheet, css.
50 thumbnails should load off website.

Comment 1

[David Valentine]

Attachment: results.css

image in class=adlThumbImg inside of adlThumb, and aCitation divs

Comment 2

[David Valentine]

Attachment: html page

Comment 3

[David Valentine]

Attachment: zip with xml, xsl and css file included

zip file, since xml file is > 300k.

Comment 4

[Boris Zbarsky [:bzbarsky]]

This needs a minimal-ish testcase....

Comment 5

[David Valentine]

Attachment: simplified testcase which flashes

Comment 6

[David Valentine]

Attachment: simplified testcase which does not flash

The "flashing", or drawing of the images in the upper corner does not happen if
a width and height is specified.

Comment 7

[David Valentine]

Attachment: css for test cases

Comment 8

[David Valentine]

does not happen on Mac OS X.3.4 (firefox 0.8)

Comment 9

[Boris Zbarsky [:bzbarsky]]

I assume every single bit of that CSS is necessary?

Comment 10

[Bob Firth]

Attachment: reduced testcase - no flashing (embedded css)

The "flashing" (the image jumps to the top of the page momentarily) only occurs
while the page is loading, so you will probably only see a single jump (try a
few refreshes if you miss it). Adding more pics on the bottom will emphasise
the effect as seen in the original example.

There are a couple of ways that I have made it stop flashing
1) specify width="104" height="128" for the second image
2) put the second image inside a paragraph (<p> </p>)

Comment 11

[Bob Firth]

Attachment: reduced testcase (embedded css)

accidentally submitted the non-flashing version which had the <p> </p> around
the 2nd image... so now we have both :)

Comment 12

[Bob Firth]

Removing keyword qawanted since we have a reduced testcase now.

I see this on linux too. OS-> All

Confirming with minor change to summary.

Comment 13

[David Valentine]

Happens with the animated ads in the new layout on betanews.
http://www.betanews.com/article/1096324259

Comment 14

[Martijn Wargers (dead)]

This bug was fixed by the checkin for bug 238493.