3D-переходы CSS3 мерцают в Firefox, когда также используется box-shadow

У меня есть элемент обложки, похожий на яблоко, созданный с использованием перехода CSS3 и 3D-преобразований.

http://jsfiddle.net/7eDkb/1/ (переход с box-shadow)

Плавно работает в Chrome, но в Firefox обложки мерцают между видимостью и невидимостью, когда они анимируются.

После процесса исключения я обнаружил, что удаление свойства CSS «box-shadow» из элементов приводит к плавным переходам в Firefox.

http://jsfiddle.net/7eDkb/2/ (переход без box-shadow)

Я тестировал это в firefox v15 и chrome v21.

Есть ли решение, позволяющее иметь как 3D-переходы, так и box-shadow на элементе без мерцания в Firefox?

РЕДАКТИРОВАТЬ: в скрипках нажмите серые изображения, чтобы увидеть мерцание


html css css-transitions firefox
person Rodik    schedule 09.09.2012    source источник
comment
Вы можете заменить тень изображением только для Firefox. Для этого потребуется некоторый javascript, так что теперь это может быть лучшим решением. Я думаю, что движок рендеринга Firefox еще не существует. Реквизит для Chrome: D   -  person Kyle    schedule 10.09.2012

Ответы (1)


arrow_upward
3
arrow_downward

Есть веская причина, по которой никто еще не ответил на этот вопрос, это ошибка Firefox.

Я отправил это в bugzilla, и это было подтверждено как ошибка.

https://bugzilla.mozilla.org/show_bug.cgi?id=790239

Как заявил @Kyle в своем комментарии, в настоящее время лучшим решением является использование неэлегантной альтернативы box-shadow в случае firefox.

person Rodik    schedule 12.09.2012