Браузеры ведут себя по-другому на переходах CSS3

Question

Доброе утро всем.

Сегодня я борюсь со следующим кодом: source на jsFiddle

То, чего я пытался добиться, - это, казалось бы, простое изображениеэффект прокрутки, когда «зеркало» изображения покрывает оригинальное изображение с использованием некоторых эффектов css3.

• Chrome 12 преобразует изображение идеально
• Firefox 5 останавливает преобразование, когда изображение попадает в курсор мыши
• IE9 - преобразование не выполняетсявообще, изображение просто дрожит
• Opera - не проверено

Как мне сделать этот кросс-браузер совместимым?

Answer 1

Я думаю, что заставил его работать в Firefox 5 так, как вы хотите. Смотри http://jsfiddle.net/X2eN6/7/

Answer 2

Согласно CanIUse.com , IE9 не поддерживает переходы CSS3, поэтому я думаю, именно поэтому он не работает в IE9.

Браузеры, поддерживающие эту функцию, - Firefox(из v4), Chrome, Safari и Opera.Но стоит отметить, что для переходов в настоящее время требуется префикс поставщика во всех браузерах, которые их поддерживают.

Префикс поставщика означает одно из двух: либо спецификация еще не завершена, поэтому функция может быть изменена в синтаксисе, либо собственная поддержка этой функции в браузере еще не считается завершенной.

Chrome поддерживает переходы целую вечность, поэтому неудивительно, что там все работает.Firefox добавил его только недавно, поэтому, поскольку он требует префикса поставщика, вы должны воспринимать это как предупреждение о том, что все может не работать на 100%.