Closed Bug 446284 Opened 16 years ago Closed 16 years ago

Wrong display of centered background image when the the browser window is resized

Categories

(Core :: Layout, defect, P2)

Product:
Core
Component:
Layout
Type:
defect

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: flod, Assigned: roc)

References

(
URL
)

Details

(Keywords: fixed1.9.1, regression, testcase)

Attachments

(3 files)

background image needed for testcase
164 bytes, image/png
Details
testcase, attached to the bug
911 bytes, text/html
Details
testcase 2
597 bytes, text/html
Details 
Test case: http://www.pseudotecnico.org/mozilla/bugzilla/test.html

a) Centered background image, black with a white content area of 800px
b) A centered div with position:relative; and width: 800px;
c) A div with position: absolute; and left: 0px;

The last div should be always displayed on the left margin of the content area, but if you resize the window you will see a 1px gap on the left, depending on the width of the browser window.

It seems a problem with the position of the background image, since the page without images works fine (see http://www.pseudotecnico.org/mozilla/bugzilla/test2.html).

Verified with Firefox 3.0.1, both on Mac OS X and Windows XP Pro sp2
fails
Gecko/2008060402 Minefield/3.1a1pre
Gecko/2008070104 GranParadiso/3.0.1pre
works
Gecko/2008060302 Minefield/3.1a1pre
Gecko/2008063004 GranParadiso/3.0.1pre
Both cases, when bug 433640 landed on trunk (mozilla-central) and 1.9.0 branch

http://bonsai.mozilla.org/cvsquery.cgi?treeid=default&module=PhoenixTinderbox&branch=HEAD&branchtype=match&dir=&file=&filetype=match&who=&whotype=match&sortby=Date&hours=2&date=explicit&mindate=2008-06-30+04%3A00%3A00&maxdate=2008-07-01+04%3A00%3A00&cvsroot=%2Fcvsroot
Blocks: 433640
Keywords: regression
Flags: wanted1.9.1?
Flags: wanted1.9.0.x?
Flags: blocking1.9.0.2?
Keywords: testcase
Attached file testcase 2 — 
Slightly different testcase.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1a2pre) Gecko/20080809033929 Minefield/3.1a2pre

Shows sometimes an 1px gap between black and orange, but no overlap.
Opera 9.5 and Safari have sometimes overlap, but never a gap.
Fx2 and IE7 always do it "right".
Sorry, Firefox 3.0.1 and 3.1a2pre has both, gap *and* overlap
Workaround:

/* left: 0px; */ left: -0.1px

btw, I see different behaviour locally and online (comment 6 vs. comment 7) 
Not blocking but wanted. dbaron or roc, who can own this?
Flags: wanted1.9.0.x?
Flags: wanted1.9.0.x+
Flags: blocking1.9.0.2?
Flags: blocking1.9.0.2-
Guess I'll take it
Assignee: nobody → roc
I'm not sure how the bug resolution process works guys, but can anyone give an estimate of when this will be fixed? Thanks :-)
Flags: wanted1.9.1? → blocking1.9.1+
Priority: -- → P2
Hi,

I have created a number of website and this issue now occurs on most of them when using firefox 3.0.1 and 3.0.2, any version of firefox before this is fine. All other browsers including IE5/6/7/8beta, opera, safari and chrome are also fine.

I have tried a number of work arounds but they dont seem to work. Please can you fix this issue asap.

Thank you.
There also seems to be an issue that when a background image is placed in the body: <body background="images/main_back.gif"> for example, old school style I know, but a tiling background of the most simple type now has a vertical rounding error when resizing the browser - not just horizontal.

This is a major flaw if you have a one pixel border defined as a background as it disappears completely.

If you could look at this Robert, that would be great, also looking forward to all the .1 updates you gave us the brief on, cheers, M@
I use a large background image aligned with CSS to be in the Top Center.  On different pages on a site I work on, the background image appears to shift at least 3 pixels to the left.  This problem does not occur when I test it in Internet Explorer, just my beloved Firefox.

I will leave my sample sites up for awhile if someone wants to see it.  A good way to see that the background definitely moves is to have at least 2 tabs open.

1) http://www.josh-wa.com/darkcity/index.html
   Note the position of the blue table.
2) Click on the photo for An Aria, or you can also go to
   http://www.josh-wa.com/darkcity/anaria.html
 
The background image definitely shifts several pixels to the left :-\
Seems to have been fixed by bug 458487.
Status: NEW → RESOLVED
Closed: 16 years ago
Resolution: --- → FIXED
Somebody claims it's fixed, so you assume it's been fixed?

How about showing us that it's been fixed? Or at least indicating when we'll see an update of Firefox that corrects the background image shift?
I tested it myself. You can test it yourself in tonight's nightly build (and Firefox 3.1beta2, when that's released).
Actually last night's nightly build should contain the fix, so you can test it right now.
This bug isn't fixed.  The original test case link at the top of this page still shows a 1px shift in the background for different window sizes.  Click the link, and slowly change the width of your browser.  It appears to move back and forth 1px.
WFM on Mac. What platform are you on?
Windows XP Pro, with FireFox 3.0.4
Jason, this was fixed for the Firefox 3.1.x releases, not 3.0.x releases. To verify the fix, you need to try either a 3.1 nightly build (or the upcoming official 3.1b2 release) or a mozilla-central nightly build.
I can confirm that this is fixed on the current nightly (Version 3.2.a1pre) on OSX.

Funny, as I finally isolated this and implemented a fix for one of our sites.

This means that bug 254214 can be marked as a dupe and closed, as well.
On builds: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090406 Minefield/3.6a1pre (.NET CLR 3.5.30729) ID:20090406045355

and

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b4pre) Gecko/20090331 Shiretoko/3.5b4pre (.NET CLR 3.5.30729) ID:20090331041754

I'm still seeing a shift to the left when the window is resized to the point that the black background image is not on the screen.
This bug is -not- resolved, I am looking at it as we speak.

Background image moves up 1 pixel.

The html/css works fine in Firefox 2, IE6, IE7, IE8. I wouldn't have noticed if I hadn't upgraded from 2.0 (after I downgraded a couple of months ago) last weekend.
It's not fixed in Firefox 3. It's fixed in Firefox 3.5.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: