5

I want to flip an image with a rotation animation when hovering over it (see the code below). When hovering over the image, it rotates around its x-axis for one second (and back when the mouse leaves the image).

The animation works as expected in Firefox and Safari. However, Chrome sometimes skips the animation and flips the image instantly. I don't know how to reliably reproduce the problem because it usually works a few times before the animation is skipped. I have recorded a video, so you can see what I mean: https://www.youtube.com/watch?v=bpgi46F_5RU

Is something wrong with this CSS? I first suspected that it's caused by the rotation angle but the same problem occurs even with other types of animations.

.flippable-container {
  float: left;
  perspective: 1000px;
}

.flippable {
  transition: transform 1s;
}

.flippable-container:hover .flippable {
  transform: rotateX(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="flippable-container">
  <img class="flippable" src="http://lorempixel.com/200/200/food"/>
</div>

Edit: As commented by TylerH, it looks like a bug in Chrome. I see the same problem in this well-known tutorial by David Walsh: http://davidwalsh.name/css-flip. Video: https://www.youtube.com/watch?v=o_TViH4AmZ8. The issue must be related to mouse interaction because the 'Toggle Flip' button below the image works fine.

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
klaussner
  • 2,364
  • 3
  • 25
  • 33
  • 2
    The issue persists with `rotate3d` as well: http://jsfiddle.net/qxrxrsuc/ so it looks like a bug in Chrome (surprise...). Though the implementation is not flawless in Firefox, either (move your mouse left and right over the image to see). – TylerH Jul 28 '15 at 14:29
  • Thanks for looking into it! I fixed the problem in Firefox by adding `:hover` to the container instead of the `.flippable` but the skipping problem is still there. – klaussner Jul 28 '15 at 14:39

1 Answers1

3

I have fixed this by putting a z-index and position:relative on all the flippable items. I have no idea why that would affect it but it seems to have done the job.

example: http://jsfiddle.net/L0duLu3c/2/

.flippable-container {
float: left;
perspective: 1000px;

}
.flippable {
    transition: 0.6s;
    z-index:10;
    position:relative;
    transform: rotateX(0deg);
}
.flippable-container:hover .flippable {
    transform: rotateX(180deg);
    z-index:20;
}
Purple Tentacle
  • 178
  • 2
  • 5
  • Interesting! :D I have tried this in my project with a more complex structure (there are multiple `div`s inside the `.flippable`) but your fix doesn't work there, unfortunately. By the way, are you using Chrome on a Mac? It looks like the Windows and Linux versions of Chrome don't have this problem. – klaussner Aug 15 '15 at 14:37