1252898 - image alignment error

Status: NEW

(Core :: Layout, defect)

Description

[ghia]

Attachment: misalign.png

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

Steps to reproduce:

Looking at website: 

http://pluimkeklop.be/cms/

Alternate sites:

http://themes.xoops.org/index.php?xoops_theme_select=neon-k

http://theme.xoofoo.org/index.php?xoops_theme_select=neon-k



Actual results:

The blocks in the (left) columns are made of 9 (background) images to form decorated round corners. There is sometimes a very slight misalignment of 1 pixel up or down of the center image (block_03.png) at the top, but mosttimes it occurs with the center image (block_12.png) in the bottom row.
Use Windows magnifier (win7 - control panel - ease of access - magnifier) to see this more accurately.


Expected results:

The images should be perfect aligned horizontally.
This is the case with Internet Explorer (IE 11.0).
This alignment problem was not present in earlier versions of FireFox. I think V38 is still correct. 
Problem seems also to be on my Android tablet Mozilla/5.0 (Android 5.0.2; Tablet; rv:43.0) Gecko/43.0 Firefox/43.0, but not with Chrome 48.

Comment 1

[Loic]

It depends on the zoom level.

Comment 2

[ghia]

You are right, the zoom level is influencing the alignment. Some gets up, others get down or right. But it never gets all level. Zooming in IE does not break the alignment.

At one point (=version), some major position changes were made in FF. Before the vertical positions of the slogan and the grey menu tabs in the header were very different in Firefox and IE. Now they are only a few pixels apart. (Lower in FF).
To get it right again, several changes were made to style.css (compare with the css of the alternative sites for Stitle, Sslogan and digihead ul).
This change is situated between 13-feb-2013 and 17-may-2014.
In FF 38.0.5 the gray menu tabs are inside the blue and above the white border for the xoofoo site. With FF 44.0.2 their bottom is below.

That difference is not bothering me so much, but the alignment of the three images is making it ugly and me filing this report.

Comment 3

[ghia]

No amelioration by V45.0.0 and V45.0.1

It seems that, while the head and bottom rows of the table are supposed to be a fixed height, the fractioned height of the middle row somehow travels down to the following rows and tables and is affecting their placement. 
Most particular is that only the middle column of that middle row is defining the height and that this works down to the other cells in the middle column.
That is puzzling me. All cells in a row should start at the same level, isn't it? That's what the definition of a row implies, right?

It seems that some internal variables about cell positioning are not reset or suffer from rounding effects when new rows or tables starts.

Comment 4

[Loic]

Provide a reduced testcase, please. Your website has a ton of CSS, we need just a simple html/css to reproduce the issue.

Comment 5

[ghia]

I get more and more convinced that the problem is the shift due to the CSS specification as reported in Bug 1262430 - Background image positioning shifts up on vertical centering
https://bugzilla.mozilla.org/show_bug.cgi?id=1262430
Because the CSS in my file specifies various background positions and the affected centered for the vertical.
.cornerTLC {
    background-image: url("visual/block_01.png");
    background-position: left center;
    background-repeat: no-repeat;
    height: 45px;
    width: 40px;
}
.cornerTC {
    background-image: url("visual/block_03.png");
    background-repeat: repeat-x;
}
.cornerTR {
    background-image: url("visual/block_05.png");
    background-position: right center;
    background-repeat: no-repeat;
    height: 45px;
    width: 25px;
}
And the 3 next for the bottom decoration.
.cornerBL {
    background-image: url("visual/block_10.png");
    background-position: left center;
    background-repeat: no-repeat;
    height: 37px;
    width: 24px;
}
.cornerBC {
    background-image: url("visual/block_12.png");
    background-repeat: repeat-x;
}
.cornerBR {
    background-image: url("visual/block_13.png");
    background-position: right center;
    background-repeat: no-repeat;
    height: 37px;
    width: 40px;
}
I will try once with setting all background positions to top left, which position is not subject to shifting and see if that cures the problem for my website. 
The position setting should not matter as the background is always contained in a box with the same height as the background image.

Comment 6

[ghia]

Indeed, setting the height and background-position to top left for all 6 backgrounds solved the problem and made my site looks crisp again. 
So, the slogan below is again true!

But the initial problem in FF remains.
No longer to see this problem at my site, but still on the other sites (see list of alternate sites above) which uses the same theme.

Conclusion: when Bug 1262430 - Background image positioning shifts up on vertical centering
https://bugzilla.mozilla.org/show_bug.cgi?id=1262430
is fixed, this can go also.

Side note:
I copied the CSS from Firebug, but the original CSS is a little different:
.cornerTLC {background-image: url(visual/block_01.png);height: 45px;width: 40px;
	background-repeat: no-repeat;background-position: left;}
.cornerTC {background-image: url(visual/block_03.png);background-repeat: repeat-x;}
.cornerTR {background-image: url(visual/block_05.png);background-repeat: no-repeat;
	background-position: right;height: 45px;width: 25px;}
.cornerBL {background-image: url(visual/block_10.png);height: 37px;width: 24px;
	background-repeat: no-repeat;background-position: left;}
.cornerBC {background-image: url(visual/block_12.png);background-repeat: repeat-x;}
.cornerBR {background-image: url(visual/block_13.png);height: 37px;width: 40px;
	background-repeat: no-repeat;background-position: right;}
Makes me wonder, the second parameter is not specified and comes back (or is default) as center.
Apparently the site behaves as it is center (with the shifts).
Should the default not be 0 0?
Which is the same as top left?
Edit:
No the default of center for the second parameter is correct:
https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-position

Comment 7

[Paul Pasca[Away. Please needinfo? Paul Oiegas [:pauloiegasSV]]]

Hi ghia,

I have tested your issue on latest FF release (45.0.2) and latest Nightly build and could not reproduce it. I have accessed the links you provided, but Firefox has the same behavior as IE and Chrome. There are some dis-alignments between the images, but since Chrome and IE have the same behavior this points out to website implementation rather than a browser issue.

Is this still reproducible on your end ? If yes, can you please retest this using latest FF release and latest Nightly build (https://nightly.mozilla.org/) and report back the results ? When doing this, please use a new clean Firefox profile, maybe even safe mode, to eliminate custom settings as a possible cause (https://goo.gl/PNe90E).

Thanks,
Paul.

Comment 8

[ghia]

Hi Paul,

I've tested with the nightly build and in safe mode and the problem (see misalign.png) is still there.
I don't see this misalignment in IE 11.0.9600.18204, nor on my tablet with Chrome 49.0.2623.105.

For the good order, it is no longer to see on my site pluimkeklop.be as I changed the CSS, to avoid vertical centering of the background images.
You can still see it at the alternate sites with the same theme http://theme.xoofoo.org/index.php?xoops_theme_select=neon-k

Did you try the demo html (tstdivcssbckgrnd.htm) of the Bug 1262430 - Background image positioning shifts up on vertical centering
https://bugzilla.mozilla.org/show_bug.cgi?id=1262430
where this problem arises from?

Regards,
Gerard

Comment 9

[Paul Pasca[Away. Please needinfo? Paul Oiegas [:pauloiegasSV]]]

Attachment: Desktop.7z

Hi ghia,

I have tried the test case you provided in bug 1262430(see attachments). I didn't see any difference between the two states of the images. Could you point out what exactly is the issue there? I've opened http://theme.xoofoo.org/index.php?xoops_theme_select=neon-k again in Firefox, Chrome and IE but there are no differences between how the browsers are displaying the alignments. Could you please make a detailed video explaining the issue there and what are the differences between how Firefox alignments the images and other browsers?

Thanks,
Paul.

Comment 10

[ghia]

The issue is that the background image which has a postion of left center, has depending on some calculation roundings a random position, which can be the desired center, but also a fraction up or down.
In my case, you see in the image of bug 1262430, (https://bug1262430.bmoattachments.org/attachment.cgi?id=8738543) in part 2 and 3 a difference of the position of the black background figure to the orange foreground and black foreground text. In the third the background is a little bit more up. When I click the button, I see the background shifting between such two positions. 
But as stated above, it depends on the zoom, which of the four figures are affected and in which direction the shift occurs.

The shifts on the website are only 1 px and very subtle to see. The image in https://bug1252898.bmoattachments.org/attachment.cgi?id=8725729 is a 8x magnified screen shot. The middle part of the panels (between feather and rounding) is shifted once down and once up.
In the image https://bug1262430.bmoattachments.org/attachment.cgi?id=8738543 you see the middle image is evenly spaced along the vertcal axis. In the third part, the white spacing between black and orange has become less at the top and larger at the bottom. Also in the foreground text, the bottom point of the ; is nearer to the edge of the cube and the b is started to be crossed in stead of the edge be tangent. 
I hope you see in these 2 images the abberations? On high-resolution screens, you may need a magnifying glass to see them properly or increase the zoom.

I see these shifts also on my tablet with Firefox (45.0.2) for Android too. Also the testcase with 4 div's is showing the jumping.

When you say that you see no differences between FF and IE or Chrome, does that mean that you don't see these shifts at all, or these shifts are present in all three browsers? 
(I see it only in FF. On IE and Chrome the position is unaffected by the CSS setting).

Comment 11

[ghia]

I added a little screen video in the other bug report, where you can see the jumping.
https://bugzilla.mozilla.org/show_bug.cgi?id=1262430#c5

Comment 12

[Paul Pasca[Away. Please needinfo? Paul Oiegas [:pauloiegasSV]]]

Hi ghia,

Could you please provide your graphics information? Is HWA enabled or disabled? What video card do you have? Are your divers up to date?

Thanks,
Paul.

Comment 13

[ghia]

Don't know what data you want I can find where on my win 7 pro acer aspire 8942G laptop, but I try:
Primary Adapter		
Graphics Card Manufacturer	Powered by ATI	
Graphics Chipset	ATI Mobility Radeon HD 5850 	
Device ID	68A1	
Vendor	1002	
	
Subsystem ID	030A	
Subsystem Vendor ID	1025	
	
Graphics Bus Capability	PCI Express 2.0	
Maximum Bus Setting	PCI Express 2.0 x16	
And from device manager:
Name	ATI Mobility Radeon HD 5850
PNP Device ID	PCI\VEN_1002&DEV_68A1&SUBSYS_030A1025&REV_00\4&70BB639&0&0008
Adapter Type	ATI display adapter (0x68A1), ATI Technologies Inc. compatible
Adapter Description	ATI Mobility Radeon HD 5850
Adapter RAM	1,00 GB (1.073.741.824 bytes)
Installed Drivers	atiumd64.dll,atidxx64.dll,atidxx64.dll,atiumdag,atidxx32,atidxx32,atiumdva,atiumd6a.cap,atitmm64.dll
Driver Version	8.670.5.1000
INF File	oem15.inf (ati2mtag_Manhattan section)
Color Planes	Not Available
Color Table Entries	4294967296
Resolution	1920 x 1080 x 60 hertz
Bits/Pixel	32
Memory Address	0xF0000000-0xF7FFFFFF
Memory Address	0xF8400000-0xF84FFFFF
I/O Port	0x00002000-0x00002FFF
IRQ Channel	IRQ 4294967293
I/O Port	0x000003B0-0x000003BB
I/O Port	0x000003C0-0x000003DF
Memory Address	0xA0000-0xBFFFF
Driver	c:\windows\system32\drivers\atikmdag.sys (8.1.1.973, 5,83 MB (6.109.696 bytes), 4/12/2009 10:05)
Don't know if this is what you are asking for.

On the other end, I see the same phenomena on my android tablet, so I doubt it is hw dependent.
These are two different HW and OS, maybe only in common is HD resolution.

Comment 14

[Paul Pasca[Away. Please needinfo? Paul Oiegas [:pauloiegasSV]]]

Hi ghia,

I'm still unable to reproduce this issue on my end. Given the fact that the issue seems to be related to something that is specific to your setup, could you please try to find a regression range using Mozregression tool?
Information on the tool is available at http://mozilla.github.io/mozregression/. Please don't hesitate to contact us if you encounter any problems.

Thanks,
Paul.

Comment 15

[ghia]

I executed the regression tests with a new blanko profile.
I have some good and some bad news:

The good news is that I have pinpointed the date when the displacement occurred in the regression tests.
From 15 march 2013 the jumping becomes visible.
Up to 14 march 2013 the background image stays fixed.

The bad news is that this is only valid for the basic zoom level. This is the 100% or ctrl 0 level.
When you increase the zoom level by ctrl +, then the jumping becomes always visible.

It means that the rounding error was there from the very beginning as of 29 may 2010, the first runnable test date. But at the normal zoom, you would never notice it. It is since 15 march 2013 that this position change became apparent for the normal zoom level.

Comment 16

[Paul Pasca[Away. Please needinfo? Paul Oiegas [:pauloiegasSV]]]

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

I have tested your issue on latest FF release (45.0.2), latest Nightly build (20160425030548) and managed to reproduce it, but only on the 45.0.2 release version. If I open https://bug1262430.bmoattachments.org/attachment.cgi?id=8738939 on the 45.0.2 release, sometimes this issue reproduces, but only on certain zoom levels. I was extremely difficult to find a zoom level that can reproduce this issue. I was not able to reproduce this on the latest Nightly(48.0a1) or I haven't fount an reproducible zoom level.

Comment 17

[ghia]

Glad you could see the problem.
Here the problem is only on some zoom levels not visible.
I suppose it is maybe dependent on display resolution (Full HD).

Today tested with the last nightly build 49.0a1 (2016-05-01).

The good news is that with the test case of bug 1262430 is no longer showing the odd behaviour at any zoom level.
https://bug1262430.bmoattachments.org/attachment.cgi?id=8738939

The bad news is that the site still does not view correctly. 
http://theme.xoofoo.org/index.php?xoops_theme_select=neon-k
There are still shifts in the positions as shown in https://bug1252898.bmoattachments.org/attachment.cgi?id=8725729 .
This means that the problem is only partially solved and the test case was only one aspect from the problem and that there is also still some other thing that influences and prevent correct positioning of the background images.