294981 - Clicking Reload makes centermost image shift causing text to misalign.

Status: NEW

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

Description

[jason.fong]

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

Loading current intel.com page ("Connecting the Next Billion People") appears
fine.  But if you click the Reload Current Page icon, the centermost image
starts to shift and looks misaligned - the text gets shifted and looks crooked.
 This happens with about every other click of the Reload button.  The image to
watch when clicking Reload is /homepage/pix/05_21_feature02.gif, the one with
all the main text.  This image will be coming down during work week 23 so I'm
not sure whether you'll get to this by that time.  Just thought I'd report it.    

Reproducible: Sometimes

Steps to Reproduce:
1.  Go to www.intel.com
2.  Click on Reload current page.
3.  Watch the center image for the shifting.  Easy to see because it has text.  
4.  Repeated clicks of the Reload button will continue to make it happen but
occasionally the shift happens every other click or every two clicks.  

Actual Results:  
Seems to shift for about 2 clicks, realigns itself on the 3rd click, 4th click
shifts it again...additional clicks seem to follow this pattern.

Expected Results:  
Image should not shift.  Our dev servers do not show the problem.  

We have two development areas and the image shift does not appear when browsed
there.  Only the live version has this problem.

Comment 1

[djpohly]

-> Layout: Images

Comment 2

[Hermann Schwab]

Attachment: minimal testcase

Comment 3

[Hermann Schwab]

Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8b2) Gecko/20050520
I'm testing on ISDN, 8 kbyte/second download speed.

Reload on Opera:
the three images are cleared, first starts to be rendered, when 1st is rendered
about one third, 2nd starts for about 10%, 3rd starts for about 25%, first image
finishes first, third one comes in second, and the one in the middle finishes last.

Reload on Mozilla:
the images are not cleared, just overwritten top down, with a white bottom border

from what I see all is normal, besides when filing a bug you should use the
latest release ( Firefox 1.0.4 is 10 months younger then 0.9.2 ) or a current
nightly.

Comment 4

[djpohly]

I do see the images shifting on Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.8b2) Gecko/20050520 Firefox/1.0+

Are you aware that you are resizing the image to be 1px taller than it really
is?  That's probably the cause of the problem (though it's still also a
rendering issue on Firefox's part).

Comment 5

[djpohly]

Attachment: image for testcase 2

Comment 6

[djpohly]

Attachment: minimal-er testcase 2

I added lines to the image, and I think it demonstrates the problem pretty
well.  On the initial paint (or hard refresh), the image is resized
erratically.  On further repainting (refresh from cache, or switching tabs,
windows, etc.) the image is displayed as expected.

Comment 7

[Hermann Schwab]

Attachment: testcase 3

Devin made a good observation.
In the original testcase, I erroneously made the width same for all, but I
didn't change the height.
1st image: 142 x 193 x 24 bpp jpeg
2nd image: 244 x 192 x	8 bpp gif
3rd image: 193 x 193 x 24 bpp jpeg

So I made this testcase three images side by side, image 1 and 3 native size,
and image 2 vertically enlarged 1px as in the website.

On reload some movement can be seen before the image starts to be redrawn, and
that is seen only on the mid image, not on the native sized images to the left
and to the right.

Comment 8

[Boris Zbarsky [:bzbarsky]]

So what "minimal-er testcase 2" shows is that we're taking the size of the
placeholder as the intrinsic size, and then scaling up to 193px tall.  Once the
image starts to come in, we change the intrinsic size accordingly, and that
changes the width.

If that testcase is representative of the rest of the bug, then I'm not really
sure what people expect -- up until we know the actual image size we can't size
the box horizontally in any sort of reasonable way here.

I can't reproduce a problem with the other testcases in this bug or with the
intel.com site itself....