CSS переход иногда пропускается в Chrome

Question

Я хочу перевернуть изображение с анимацией вращения при наведении на него (см. Код ниже). При наведении курсора на изображение оно вращается вокруг своей оси x в течение одной секунды (и назад, когда мышь покидает изображение).

Анимация работает как положено в Firefox и Safari. Однако Chrome иногда пропускает анимацию и мгновенно переворачивает изображение. Я не знаю, как надежно воспроизвести проблему, потому что она обычно работает несколько раз, прежде чем пропустить анимацию. Я записал видео, чтобы вы могли понять, что я имею в виду: https://www.youtube.com/watch?v=bpgi46F_5RU

Что-то не так с этим CSS? Сначала я подозревал, что это связано с углом поворота, но такая же проблема возникает даже с другими типами анимации.

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

Изменить: Как прокомментировал TylerH, это похоже на ошибку в Chrome. Я вижу ту же проблему в этом известном уроке Дэвида Уолша: http://davidwalsh.name/css-flip. Видео: https://www.youtube.com/watch?v=o_TViH4AmZ8. Проблема должна быть связана с взаимодействием с мышью, потому что кнопка "Toggle Flip" под изображением работает нормально.

Answer 1

Я исправил это, поместив z-index и position: относительный на все элементы, которые можно переключить. Я понятия не имею, почему это повлияет на это, но, похоже, это сделало работу.

пример: 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;
}