CODEWITHSUNDEEP
cssgoogle-chromecss-transitionsprefixfree
klaussner
klaussner

Reputation: 2374

CSS transition is sometimes skipped in Chrome

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.

Upvotes: 6

Views: 3600

Answers (1)

Purple Tentacle
Purple Tentacle

Reputation: 178

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;
}

Upvotes: 3

Related Questions