254214 - Window resize shifts body by one pixel. Problem with CSS. Rounding error?

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Sean Kelly]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.2 (KHTML, like Gecko) Safari/125.8
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7) Gecko/20040628 Firefox/0.9.1

This is a problem with correctly parsing the CSS at the url http://www.reed.edu/~kellys/ruug/css/
ruug.css.  To reproduce, go to http://www.reed.edu/~kellys/ruug/index.html and try increasing the 
width of the window *very slowly*.  For every pixel resize, the body's left margin and the background 
are out of sync, causing two gray vertical lines to appear on either side of the body.  On every other 
browser, these do not appear.

Reproducible: Always
Steps to Reproduce:
1. visit http://www.reed.edu/~kellys/ruug/index.htm
2. increasing the width of the window *very slowly*
3. pay attention to the gray vertical lines that flash.
Actual Results:  
The page does not lay out correctly half the time (half the time meaning that whether or not the width 
of the window is odd or even seems to cause the problem)

Comment 1

[Boris Zbarsky [:bzbarsky]]

Sean, it'd help to attach the testcase to this bug using
http://bugzilla.mozilla.org/attachment.cgi?bugid=254214&action=enter so it'll
stick around for sure...

Comment 2

[Sean Kelly]

Attachment: the page in question

Comment 3

[Sean Kelly]

Attachment: the page's css

Comment 4

[Gervase Markham [:gerv]]

This is an automated message, with ID "auto-resolve01".

This bug has had no comments for a long time. Statistically, we have found that
bug reports that have not been confirmed by a second user after three months are
highly unlikely to be the source of a fix to the code.

While your input is very important to us, our resources are limited and so we
are asking for your help in focussing our efforts. If you can still reproduce
this problem in the latest version of the product (see below for how to obtain a
copy) or, for feature requests, if it's not present in the latest version and
you still believe we should implement it, please visit the URL of this bug
(given at the top of this mail) and add a comment to that effect, giving more
reproduction information if you have it.

If it is not a problem any longer, you need take no action. If this bug is not
changed in any way in the next two weeks, it will be automatically resolved.
Thank you for your help in this matter.

The latest beta releases can be obtained from:
Firefox:     http://www.mozilla.org/projects/firefox/
Thunderbird: http://www.mozilla.org/products/thunderbird/releases/1.5beta1.html
Seamonkey:   http://www.mozilla.org/projects/seamonkey/

Comment 5

[kaldari]

Although the testcase for this bug no longer works (due to missing files), you can see this bug in action on such high profile websites as mtv.com and cmt.com. Just visit any page on one of those sites and slowly resize the window. You will see that the centered div (margin:0 auto;) looses alignment with the centered background by 1-pixel whenever the window is sized to a width that is an odd number of pixels. This only occurs in Firefox on a Mac, not on PCs. It seems that the algorithm that calculates centering for background images doesn't handle rounding the same way that the algorithm for centering divs does.

Comment 6

[kaldari]

Also, this appears to be a regression, as I can see the bug in Firefox 3 but not in 2.

Comment 7

[Chris Patterson]

We ran into this issue recently at work, with the same profile kaldari reports. Firefox 2 rendered correctly at all resolutions, but Firefox 3 would misalign the background and centered div by one pixel at odd resolutions. http://trac.openplans.org/livablestreets/ticket/536 was our ticket, and I've worked around the immediate issue, but the algorithms for centering background images and centering contained divs should produce identical results at all resolutions.

This is definitely a regression from FF2.

Comment 8

[Chris Patterson]

Attachment: Simple test case manifesting the renderbug

To reproduce the issue, view the html page in Firefox 3 while resizing the browser window horizontally. The hash marks will misalign.

Note that resizing doesn't actually trigger the behavior (if you are at a resolution which triggers the renderbug, it will manifest without having to resize the window).

Reported on Firefox 3.0.4 / OSX, but I get the same results on my Windows XP machine.

Comment 9

[Chris Patterson]

Attachment: Screenshot of the test case, illustrating the problem

Comment 10

[Jason Bassford]

No bug or patch referenced as the fix.

Comment 11

[skaimauve]

Attachment: Test case for bug and workaround side-by-side

This file demonstrates how to avoid the background image position center alignment roundoff error on nested divs with the inner one centered by margin: 0 auto by adding margin-left 0.5px to the outer div. I hope this comes to some help.