Bug 14956 – 1 pixel background-image shift

• Component: CSS
• Status: RESOLVED DUPLICATE

[mupo]

"The problem occurs when positioning background images using the ‘center’ keyword. It’s a rounding problem - odd window widths cause centered background images to misalign with centered div’s."

[David Kilzer (:ddkilzer)]

Does this still happen with WebKit nightly builds?  http://nightly.webkit.org/

[mupo]

Yes, this occurs still in the actual nightly build for Windows (WebKit r24872 built on 05 August 2007, Safari 3.0.3 (522.15.5))

[David Kilzer (:ddkilzer)]

(In reply to comment #2)
> Yes, this occurs still in the actual nightly build for Windows (WebKit r24872
> built on 05 August 2007, Safari 3.0.3 (522.15.5))

Could you post a (reduced) test case without the workaround incorporated?  Thanks!

[Beanbag Amerika]

Created attachment 23079 [details]
Reduced test case demonstrating the centering bug.

Still present in nightly builds. This bug is in the latest versions of Firefox as well..

[Dominic Cooney]

Created attachment 39158 [details]
Makes text-align: center and background-position: center align consistently.


---
 443 files changed, 3296 insertions(+), 2774 deletions(-)

[Eric Seidel (no email)]

Comment on attachment 39158 [details]
Makes text-align: center and background-position: center align consistently.

The tab in your ChangeLog will prevent this from being committed automatically.  You'll need to upload a tab-less patch if that's your desire.

Getting this patch reviewed is entirely about convincing someone that your change is correct.  It's scary because it changes lots of tests.  I can't tell if this is correct or not.  You might be able to get a quick review if you track down hyatt in #webkit.

[Adam Barth]

Comment on attachment 39158 [details]
Makes text-align: center and background-position: center align consistently.

r- for tab in the ChangeLog.  Holy moly, that's a lot of test expectation changes!  How does this not break the web in half?

[Simon Fraser (smfr)]

Is there a reason the change affects the test postion, rather than the background-position? What do other browsers do?

[Dominic Cooney]

Centered backgrounds and centered content are out of alignment because background position is calculated with floating-point arithmetic and content alignment is calculated with integer arithmetic (division truncates).

This bug could be fixed by making background positions also truncate, but that would break sites that work around this bug by aligning their backgrounds at 49.99etc.%. It would also mean taking % computations for content and making them truncate too (otherwise backgrounds at n% and content at n% will shimmer.)

Because a lot of tests gratuitously use centered content to look purty, changing how content is aligned requires rebaselining lots of tests.

Firefox 3.5.4 doesn't truncate when it computes centered content position. For example, 500px content in a 1375px container is at offsetLeft 438 and a centered 500px background image is also at 438; Safari would truncate 437.5 and put the image at offsetLeft 437, but round up and put the background image at 438.

I'm not sure if IE always truncates or rounds. But it does it consistently and doesn't exhibit this bug.

[Eric Celeste]

By the way, this seems to be the same bug reported as Bug 18013.

[Dominic Cooney]

*** This bug has been marked as a duplicate of bug 18013 ***