30

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.

David
  • 7,310
  • 6
  • 41
  • 63
Tony Beninate
  • 1,926
  • 1
  • 24
  • 44
  • 1
    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). – Rich Bradshaw Jun 24 '11 at 09:07
  • "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? –  Jun 24 '11 at 12:04
  • 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. – Jonathan Miller Jun 24 '11 at 13:02

7 Answers7

24

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.

alalonde
  • 1,823
  • 1
  • 16
  • 27
  • 2
    This however causes scaled text (`-webkit-transform: scale(1.1);`) to become blurry, for some unknown reason. – aliz_bazar Dec 27 '11 at 09:20
  • +1 for this, solved this not so slight problem. the one below wouldn't be too much either. – Ben Nov 05 '12 at 22:32
  • Until problem that aliz_bazar mentions above is solved, this backface visibility trick isn't a good solution. – Gersom Jul 09 '13 at 18:36
10

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;
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Fábio ZC
  • 798
  • 7
  • 10
1

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/

Botz3000
  • 39,020
  • 8
  • 103
  • 127
user1352888
  • 11
  • 1
1

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.

Chris Fletcher
  • 2,367
  • 1
  • 16
  • 19
  • 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? – Tony Beninate Jul 01 '11 at 11:59
  • 1
    This was what solved this issue for me. Position absolute which I assume gives it a z-index that sorts it out. – Sam Parmenter Mar 23 '12 at 18:39
  • z-index is also possible on relative elements, so I'm not sure your assessment is true. – Abadaba Oct 09 '13 at 20:02
0

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

img:hover{
    opacity: 0;
}
Yuval
  • 1
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.

Community
  • 1
  • 1
PIIANTOM
  • 1,311
  • 11
  • 20
-1

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

La-comadreja
  • 5,627
  • 11
  • 36
  • 64
PhilAppDevemlopment
  • 1