Background shift in Google Chrome when opacity changes on hover

问题

I have a hover effect set up with Jquery that changes the opacity of the hovered element. It works fine in all recent browsers, except for Chrome, where it shifts the body elements' background.

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

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

Is there any workaround for this? Thanks in advance!

回答1:

I experienced something very close to this, in my case changing the opacity on hover caused a foreground image element to wiggle. It looks like the particular cause is related to using transform (which I was using). The fix was simple - on the img element in question I added:

-webkit-backface-visibility: hidden;

No more wiggle. I'm not familiar with what this actually does, but it didn't have any weird side effects and fixed the problem.

I also saw an alternate solution that I didn't try - apparantly other people have experienced this and fixed it with rotate:

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

回答2:

I can finally see the problem in Chrome. It is very subtle so unless one knows exactly what you're looking for, it's easy to miss.

I'm still working on the rest of the issues, but when I hover over the "stiati ca" logo in the lower middle, I could see the background shift a bit just to the left of the image.

The problem appears to be related to the background-size part of your CSS here. If I remove the background-size lines, the problem completely disappears. I'm not suggesting that's the actual cause of the problem, but that's the first clue. My guess at this point in the investigation (more coming later on in the answer) is that something in the hover is causing the document size to change which causes the background to rescale and thus 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');
}

Pursuing this further, I find that if I comment out the text-indent line from this block of CSS:

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 goes away for hovering over the logo. Of course, there is some text from your link showing that I guess you didn't want visible, but you can fix the HTML to work differently. I'd suggest using a link with a fixed size div in it (no text in the link) and then set the background image on the div and not on the link itself. This is a safer cross browser way to do things anyway and you won't need the text-indent line and the background shifting problem should go away for the logo image. If you really need the text in the link but don't want it to show, then put it in a span and make the span invisible with display: none. Either way, you should not set the background image on the <a>, but rather on an element with the appropriate size inside the link. This should work better.

I haven't yet figured out why the same problem occurs on the top four images. I will add to my post if I figure that one out.

来源：https://stackoverflow.com/questions/10297930/background-shift-in-google-chrome-when-opacity-changes-on-hover

标签

jquery

css

google-chrome

background

opacity