-transform:scale causing 'blinking' when hovering

Question

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.

Kesterson

I have had similar problems, and suspect it's due to glitchy graphics implementations for chrome, as I've had it on the dev builds (with hardware acc), but not the standard ones (without). – Ejaculatory

"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." Just for clarity - did you create a number of sites? Or did you create a single site that you are testing in a number of different browsers? – Tut

I've also experienced this when testing transitions on various css3 properties. I suspect it is as Rich says, some glitches with the browsers that still needs to be ironed out. Your CSS looks sound. The only thing I might recommend is putting the transition property on the main element, not the hover state. – Footprint

Answer 1

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.

Subhead

This however causes scaled text (-webkit-transform: scale(1.1);) to become blurry, for some unknown reason. – Waft

+1 for this, solved this not so slight problem. the one below wouldn't be too much either. – Bhakti

Until problem that aliz_bazar mentions above is solved, this backface visibility trick isn't a good solution. – Platinum

Answer 2

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;

Ocker

this fixed it for me. i had less 'old webkit browser' issues with this code. – Pi

Answer 3

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.

Improper

Thanks for all the feedback. I've implemented a couple of these suggestions, still with no luck. I beginning to think it may simply just be glitches with css3, chrome, safari, and certain graphic setups. @cfouche; to answer your question, I work for a software company and we provide software that customers install on their websites. That's what I mean by 'a number of different website'. So, on the same setup, it will be find on one website, but 'flashing' on another website. Weird, huh? – Kesterson

This was what solved this issue for me. Position absolute which I assume gives it a z-index that sorts it out. – Tague

z-index is also possible on relative elements, so I'm not sure your assessment is true. – Quintain

Answer 4

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/

Overwinter

Answer 5

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

img:hover{
    opacity: 0;
}

Iodous

Answer 6

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.

Fineness

Answer 7

For me none of the mentioned css fixes worked, but in my case the cause was something different. Hopefully this will help someone else that is facing the same issue.

I am using scale(0.8) in combination with an opacity change to 0 to 'fade out' the div elements. This works well but the blinking/flickering was really annoying. In our case the cause for this blinking was a parent container that was undergoing a height change at the same time the child div's were scaling to 0.8. Both 'animations' were conflicting somehow and causing the blinking. Changing the height of the parent div after the scaling completes, solved everything.

Acceptation

Answer 8

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

Refreshment