CSS Transform hover bug in Webkit when using perspective, rotateX, rotateY and scale

Question

I have the following fiddle: http://jsfiddle.net/cYwkz/

I'm using the following CSS:

article {
  border: 2px solid #cccccc;
  background-color: #e5e5e5;
  border-radius: 5px;
  display: inline-block;
  height: 150px;
  margin: 0 2% 32px;
  position: relative;
  vertical-align: top;
  width: 160px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -o-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
article:hover {
  -webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
  -moz-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
  -ms-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
  -o-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
  transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
}

When I hover the left-bottom part of the articles, the hover and transforms work as correctly. However when I hover over the right-top part, the transform flickers or sometimes doesn't start at all. I don't have these problems in Firefox.

System: Mac OSX 10.9.1 Works in: Firefox 26, Firefox Aurora 28, IE10 Fails in: Chrome 32, Safari 7.0.1, Opera Next 19

Hope you guys can help! Thanks in advance

Answer 1

The problem arises from the fact that in webkit the plane situated at z=0 gets the hover events (so to speak).

Since your rotation makes the elements (specially the right top part) go away (or inside the screen), they get under the zplane and no longer trigger the hover.

You can solve that moving them towards z positive:

-webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) 
                   translateZ(10px) scale(1.025);

To avoid the Z movement in the hover state, set the same Z in the base state.

-webkit-transform: perspective(400px) rotateX(0deg) rotateY(0deg) 
                   translateZ(10px) scale(1);

It's always a good idea, when using transitions, to set the base transform in the same way that the transformed state. That's why I set the 0deg rotations.

fiddle