1262430 - Background image positioning shifts up on vertical centering

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[ghia]

Attachment: background shift.png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160315153207

Steps to reproduce:

I opened the following fiddle case: http://codepen.io/team/css-tricks/pen/yyKdPB/
There is a background image of 50 x 50 px displayed in three cases.
In the css editor modify the lines after the div selector to set height and width to 50 px:

div {
  width: 50px;
  height: 50px;

(Observation 1)

Alter the first background css from 

#onevalue { background-position: 10px; }

to

#onevalue { background-position: left top; }

(observation 2)

Modify again to

#onevalue { background-position: left center; }

(Observation 3)

PS
For clarity or less cluttered view, it is possible to shorten the text of the first div in the html pane to eg.:

<div id="onevalue">
  <p><code>b;</code></p>
</div>

But it doesn't matter.


Actual results:

After the text modifications are made, wait a little moment to see the result in the right panel.
-1- The background picture in the first square of the result panel is (probably) 10 px to the left, however it is not on equal distance from the orange top and bottom border (closest to the top).
-2- The background image jumps perfect in the middle of the orange borders.
-3- The background image shift a little bit up.
See also the three screen copies in the attachment.


Expected results:

As a background picture has the same size as the owning div, it should always fit perfect. As it is fitted due to the equal dimensions, it is also aligned at all sides, so it should not matter if you specify left, center, right or top, center, bottom (or use the defaults of 0(?)). 

-1- While the div and picture are 50 px squares and the circle is perfect centered in the picture, leaving 1 px white on top, left, right and bottom, I assume the background image should fit evenly on the vertical axis.
-2- As expected and correct. Fits evenly in all directions to the 4 sides.
-3- The background images shifts again vertically out of center towards the top. Horizontally the position stays correct.

Additional observation with IE11: The background image centers perfect horizontally, but is unevenly spaced towards the bottom. The position is not affected by setting top, center or bottom.

This was observed by trying to change my site's panels from table to div's and this could be related to Bug 1252898 - image alignment error
https://bugzilla.mozilla.org/show_bug.cgi?id=1252898

Comment 1

[Loic]

Attachment: 1262430.html

Comment 2

[Loic]

Attachment: ff45-ie11.png

I don't see any obvious differences between FF45 and IE11 on my machine.

Comment 3

[ghia]

Attachment: tstdivcssbckgrnd.htm

Comment 4

[ghia]

It looks to me, that there is a slight difference in position of the background image on row 2 of your ff45-ie11.png

I fabricated an adapted html version to test the 'jumping' of the background image in the div.
Push the button to switch from left top to left center.
The fault is always when left center is set and left top is always correct positioned.
It varies with the zoom by using ctrl + to increase (and ctrl - to shrink or ctrl 0 to reset).
On some zooms the left center is correct and the background image stays at position.
On others the background shifts to the top or sometimes to the bottom.
The number of div's that is affected is varying and also which ones.
eg on my system, starting with zoom 0, listing div's 1 to 4 their displacement directions when set to left center
0 ok bottom ok bottom
+1 ok ok ok ok
+2 top top top top
+3 bottom top ok bottom
+4 ok top ok ok
+5 top bottom ok top
+6 top top top top

On IE11 the background image is most-times not correct aligned, but never shifts depending on the CSS.

As commented on Bug 1172209 - CSS scale() Transform and Background Position Produce Visual Glitch (Gap) 
https://bugzilla.mozilla.org/show_bug.cgi?id=1172209
when using it in mirror, the background position ameliorates and stays independent of the CSS setting.
Change the <body> tag to <body style="transform :scale(-1,1);"> to see that.
(Altough i have the impression that for some zooms the position may have shifted to the top, it stays steady.

Comment 5

[ghia]

Attachment: backgroundshift.wmv screen shot movie showing jumping in 2 and 4

Little video that shows the movement of the background, depending on the CSS.
In this case, the second and fourth div's are affected. The first and third stays steady.

Comment 6

[ghia]

Today tested with the last nightly build 49.0a1 (2016-05-01).
I can no longer reproduce the odd behaviour with #c3 at any zoom level.
So, it seems this particular problem may have been solved.
Just waiting release of v49 to close this one.

Comment 7

[Gérard Talbot]

Resolving as WORKSFORME based on reporter's comment.