Объясните баг в Firefox?

Question

[umberford]

Логика такая: при наведении блок переворачивается и показывает "обратную" сторону
По сути, реализация 3D flip card как Тут
в хроме и опере все нормально, но в Firefox заметил такой баг: при наведение блок переворачивается с помощью transform rotate и transition и показывается обратная сторона с фоновым изображением, но изображение в процессе поворота мерцает, прекращает мерцать только поворота.
НО
если прописать в "лицевом" блоке transform: rotateY(0deg) то изображение не мерцает, и все норм
Что это за хак? И вообще почему такое поведение?
вот весь код на CodePen

Answer 1

[Alexander Kramov]

Судя по всему тебе надо реагировать на :hover родительского элемента, потому-что элемент .flip при вращении изменяет свой так сказать хитбокс, по которому засчитывается :hover.

То есть тебе в твоём пене нужно поменять селектор .flip:hover на .wrap:hover > .flip и тогда у тебя всё будет работать без мерцаний.

P.S. на HTML5Book в примере, кстати, так как я говорю и сделано.