CODEWITHSUNDEEP
htmlcsshoverz-indextransform
Tony Beninate
Tony Beninate

Reputation: 1985

-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.

Screenshot of catalog

.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.

Upvotes: 30

Views: 17948

Answers (8)

Onthrax
Onthrax

Reputation: 128

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.

Upvotes: 0

PhilAppDevemlopment
PhilAppDevemlopment

Reputation: 1

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

Upvotes: -1

PIIANTOM
PIIANTOM

Reputation: 1391

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.

Upvotes: 0

Yuval
Yuval

Reputation: 1

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

img:hover{
    opacity: 0;
}

Upvotes: 0

user1352888
user1352888

Reputation: 11

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/

Upvotes: 1

Fábio ZC
Fábio ZC

Reputation: 828

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;

Upvotes: 10

alalonde
alalonde

Reputation: 1963

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.

Upvotes: 24

Chris Fletcher
Chris Fletcher

Reputation: 2387

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.

Upvotes: 1

Related Questions