Почему анимация rotateY (flip) css3 мерцает в Chrome?

Я сделал jsFiddle: http://jsfiddle.net/Grezzo/JR2Lu/

Когда вы нажимаете клавишу i на клавиатуре, изображение переворачивается, чтобы показать текст, но во время анимации перелистывания оно мерцает (особенно текст мерцает) при просмотре в Chrome.

(обратите внимание, что я использую JS-библиотеку -prefix-free, поэтому мне не нужно ставить префикс со свойствами CSS, специфичными для браузера.)

Почему он мерцает и как его остановить?

ОБНОВЛЕНИЕ: Мерцание заметно в Chrome 20.0.1132.47 m, работающем на XP, и какой бы ни была последняя версия для OS X 10.7.4 Lion (сейчас меня нет рядом с моим Mac, чтобы проверить)


person Grezzo    schedule 02.07.2012    source источник
comment
Здесь отлично работает Chrome 18 в Linux (ВСЕГДА упоминайте версию браузера, когда спрашиваете о проблемах, связанных с браузером).   -  person Rob W    schedule 02.07.2012
comment
@RobW Хороший вопрос - добавлены версии браузера.   -  person Grezzo    schedule 02.07.2012
comment
Это очень странно — то же самое для меня на моем Mac. Я написал учебник об этом и никогда не видел такого поведения...   -  person Rich Bradshaw    schedule 02.07.2012


Ответы (1)


Ну, это немного странно. Удалив background-color из .card, все работает нормально: http://jsfiddle.net/JR2Lu/3/

Кажется, что проблема заключается в стиле .card, вероятно, потому что вы обычно не видите этот div.

person Rich Bradshaw    schedule 02.07.2012
comment
Сэр, вы гений. Я уже встречался с вашим руководством (css3.bradshawenterprises.com/all) и снова обратился к это много раз. Это было очень полезно, спасибо. - person Grezzo; 02.07.2012
comment
Хорошая находка! Мои лица имеют больше контента и стилей, они, по-видимому, не мерцают там, где нет фона или изображения, но это ограничивает эффект тривиальными вариантами использования :( - person skrat; 26.07.2012
comment
есть новости об использовании эффекта флипа с фоновыми цветами? Я испытываю ту же проблему! - person tmaximini; 08.11.2012
comment
Насколько я помню, проблема здесь заключалась в том, что div был оформлен так, как не должен был быть — div .card — это просто держатель, и его не нужно стилизовать — просто стилизуйте лица. - person Rich Bradshaw; 08.11.2012