Рывки изображения при трансформации CSS transitions в Firefox

Делая кое-какую работу по сайту http://inventive.ru/ заметил неприятную вещь — слайдер с эффектом Кена Бёрнса, что на главной, который я когда-то делал, в Firefox почему-то начал увеличивать картинки рывками. Зрелище было не из приятных. А вот в Хроме, к примеру, по прежнему все было ОК, то есть плавная анимация, как и положено.

Чтобы было понятно о чем я говорю, я оставил данный эффект у себя на тестовой площадке - http://layouts.borshak.com/inventive/ Причем наблюдается он не только в Firefox (v.35), но и в Internet Explorer (v.11). Хотя раньше, разумеется, все было нормально — я тестировал эффект с нескольких компьютеров, плюс перед внедрением на рабочий сайт эффект тестировали коллеги.

После непродолжительного изучения CSS через FireBug полез искать в интернет — может кто-то уже решал данную проблему. Первое, на что наткнулся - установка свойства

backface-visibility:hidden;
на анимируемый блок. Не помогло.


Однако потом наткнулся на заметку веб-разработчика Джиеля Беркерса. У него возникла точно такая же проблема, и решил он её следующим образом — добавил к трансформации в FireFox небольшой поворот блока, всего в 0,02 градуса (угол столь мал, что визуально никакого поворота незаметно). Я попробовал повторить, и — о, чудо! — всё заработало как надо.

Поскольку у меня проблема наблюдалась и в IE, добавил этот "финт ушами" и для него.

В итоге, мои правила трансформации выглядят сейчас так:


-webkit-transform: scale(1.08);
transform: scale(1.08);
-moz-transform: scale(1.08) rotate(0.01deg);
-ms-transform: scale(1.08) rotate(0.01deg);


— 1-е правило задано специально для Safari под Mac — без него он напрочь отказывался что-либо анимировать.
— 2-е правило — для всех современных браузеров.
— 3-е и 4-е — оперативное решение проблемы для Firefox и IE.