929250 - background-position percentage has 1px error when using 50%

Status: NEW

(Core :: Layout, defect)

Description

[Prannay Budhraja]

Attachment: Actual result on FF24.0 in Win8. Note the chopping on left and overflow of next image from right

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

When background-image is larger than div and using background-size 300% 200%, then using background-position:50% 0% has a 1px error in the position of the image causing the sprite icon to be chopped/overflowing by 1px.

1. create div with class "playIcon"
2. Pick a sprite image with three states of the icon, each state 105px wide.
3. Set the css for class playIcon as :
.playIcon {
    background-image:url("https://dl.dropboxusercontent.com/u/7354115/playpause_105x105_sprite.png");
    height:79px;
    width:79px;
    background-size: 300% 200%;
    background-position: 0% 0%;
}

4. Set the css styles for active and hover as
.playIcon:hover{
    background-position: 50% 0%;
}

.playIcon:active{
    background-position: 100% 0%;
}

5. Mouse over the div

Test page showing the bug: http://jsfiddle.net/bcZWG/4/ Mouseover the play icon to see it appear shifted left by 1px in its hover state.



Actual results:

The middle image in the sprite is displayed but moved 1px to the left, hence chopped by 1px on its left and showing 1px of the next image in the sprite.


Expected results:

The middle image in the sprite should be aligned perfectly.

Comment 1

[(mostly gone) XtC4UaLL [:xtc4uall]]

Confirmed against Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 ID:20140112030204 CSet: 171857e7e334.

If also seems - more or less - dependent on content zoom levels, thus maybe a rounding issue.

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

Attachment: Reporter's Testcase

Comment 3

[Andy Balaam]

I can reproduce this in Firefox 147.0a1 (2025-11-14) (64-bit) on Debian 12.

I notice that it only happens when the page zoom is not 100%.

In the attached screenshot extra_black_line.png:

• The original image is 48 pixels tall
• The scaled height in CSS (via "background-size") is "168px"
• The height of the image in CSS is "56px"
• The vertical position via "background-position" is "0px"
• Critically, the page zoom is 110% (I can't get this to happen at 100%)

168 / 56 = 3 exactly, so exactly one third of the vertical height of the image should be visible.

But as you can see in the screenshot, a thin black line appears below the feet of the character. (Notably, this line is thinner than a single pixel of the image - it is rendered with "image-rendering: pixelated")

In the original image, the first vertical third is 16 pixels, which does not include the black line - the black line is the 17th pixel.

Comment 4

[Andy Balaam]

Attachment: extra_black_line.png

As mentioned in my comment

Comment 5

[Andy Balaam]

Note: my case does not use percentage background-size, but exact pixels.