-transform:scale causing 'blinking' when hovering

I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering.

Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine.

Wish I had more information, but maybe someone else has run into a similar problem.

.swatch {
  -webkit-box-shadow: #EFEFEF 2px 2px 0px;
  -webkit-transform: scale(1);
  -webkit-transition-duration: 0.2s;
  border: 1px solid white;
  position: relative;
  z-index: 1;

.swatch:hover {
  position:relative;
  z-index:10;
  transition-duration: 0.2s;
  transform:scale(1.8);
  -webkit-transition-duration: 0.2s;
  -webkit-transform:scale开发者_如何学编程(1.8);
}

It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project.

Any thoughts are appreciated.

I've had success adding

-webkit-backface-visibility: hidden;

to the offending element (.swatch in your case).

However, test it in older versions of Chrome and Safari to make sure it doesn't break anything else. In my experience, Safari 4 specifically isn't a big fan.

I had the same problem at this morning. But I found an answer on the web few moments ago.

To prevent the Blink issue, put the follow property on your .swatch class (not on :hover):

-webkit-transform-style: preserve-3d;

Try changing position:relative to position:absolute, and/or specify position attributes (top: x, left: y.

No idea if it will work, just throwing it out there.

when mouse over the images(img:hover) in chrome works fine. you can use like this

.swatch img:hover

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

I had the same problem try using opacity instead of z-index

img:hover{
    opacity: 0;
}

On a different subject, I had the same effect (the awfull blink).
However, it wasn't on hover principles. It was on a dragable area, I wanted as smooth as possible on iPad. The area was originally moved with a css margin-left property.
Then, I used -webkit-transform':'translate3d(X, Y, Z)' for the smooth rendering, which is the case.

BUT, the use of translated3d made the famous blink, on the first drag (on iPad only).

Thanks to Fábio ZC, the -webkit-transform-style: preserve-3d; worked perfectly to get rid of the blink

For those who wants to know more about the -webkit-transform-style: preserve-3d and what is involved.

Back to the original problem, these are my thoughts:

1. You mention Safari & Chrome (so, webkit). Is the problem only on those browser? Which would lead to -webkit suspicious properties.

2. If so, -webkit-backface-visibility: hidden; or -webkit-transform-style: preserve-3d; are still good candidates to be tried:
   

3. Did you attach them on the .swatch class? (not hover state, otherwise, they will be considered too late, as the animation will be played directly)

4. You stated that the whole page is blinking? Strange as only the swatches should be impacted.

I deleted this line from the hovering class: "display: none;" and amazingly, that worked. Try it and hope it solves your problem.