Background shift in Google Chrome when transparency changes while freezing

Question

I have a hover effect created using jQuery that changes the opacity of a hover element. It works great in all recent browsers except Chrome, where it moves the background of body elements.

Here's the link: http://wrong.ro/tataia/

My working environment is as follows: Google Chrome v18.0.1025.162 / Windows 7 x64.

Is there a workaround for this? Thanks in advance!

Answer 1

I experienced something very close to this, in my case, a change in opacity on hover made the foreground image element vibrate. It seems that the specific reason is related to using the transform (which I used). The fix was simple - in the img element in question, I added:

-webkit-backface-visibility: hidden; 

No more moving. I am not familiar with what this actually does, but it had no strange side effects and the problem was fixed.

I also saw an alternative solution that I have not tried - obviously other people have experienced this and fixed it with rotate:

 -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); 

Answer 2

I finally see the problem in Chrome. This is very subtle, so if you do not know exactly what you are looking for, it is easy to miss.

I am still working on the rest of the problems, but when I hang over the “stiati ca” logo in the lower middle, I could see the background shift a little bit to the left of the image.

The problem seems to be related to the background-size your CSS. If I delete the background-size lines, the problem will completely disappear. I do not assume the actual cause of the problem, but this is the first clue. My hunch at this point in the study (the later part of the answer) is that something in the hover causes the document to resize, which causes the background to rescale and therefore shift:

 body { background: black url('../img/bck.jpg') left top fixed no-repeat; moz-background-size: cover; background-size: cover; -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale')"; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale'); } 

Following this, I found that if I comment out the text-indent line from this CSS block:

 a#stiati_ca{ display: block; width: 124px; height: 124px; xtext-indent: -9999em; background: url('../img/stiati_ca.png') no-repeat; margin: 88px auto 0; } 

Then the problem completely disappears for the logo to hang. Of course, there is some text from your link showing that I think you didn’t want to see, but you can fix the HTML to work differently. I would suggest using a link with a fixed div size in it (without the text in the link), and then set the background image to the div, and not to the link itself. This is a safer cross-browser way to do something anyway, and you don’t need a line of indent text, and the problem with moving the background should disappear for the logo image. If you really need the text in the link, but do not want it to appear, then put it in the gap and make the range invisible with display: none . In any case, you should not set the background image to <a> , but rather to an element with the appropriate size inside the link. This should work better.

I still do not understand why the same problem occurs in the top four images. I will add to my post if I make it up.