Проблема с transform и z-index в Safari

[bobus256]

Пытаюсь решить проблему со слайдером в Safari. Слайдер - модальное окно, в котором контейнер с картинками (3 штуки - текущая, следующая и предыдущая, находящиеся друг над другом), и svg-маска. Смена слайдов - анимация свойства clip-path для следующей/предыдущей картинки. Само модальное окно тоже анимируется на mousemove - поворот по X и У c перспективой 1000px.

При анимации (повороте) контейнера в Safari происходит следующее : верхняя картинка обрезается, и угол среза зависит от наклона контейнера, с котором эти картинки находятся. При этом видна часть "нижнего" изображения.

Выглядит примерно так

Кто-нибудь сталкивался с такой проблемой? Как ее решить?

Примерный код тут - Для просмотра ссылки Войди или Зарегистрируйся.

Причем в хроме работает отлично.

Заранее спасибо за советы.

 

[2cher777]

В IE-11 появился хороший отладчик. После того как отлаживаю и все работает в нем, работает и в остальных браузерах. У меня немного подругому лаг выглядит при пролистывании. И кнопка X ломаная...

 

[bobus256]

Интересует только баг в Safari, кнопка меня не интересует.

 

[mdss]

для трансформаций у сафари необходимо указывать translateZ, возможно он поможет убрать баг рендеринга

 

[bobus256]

для трансформаций у сафари необходимо указывать translateZ, возможно он поможет убрать баг рендеринга

Или я куда то не туда добавляю или translateZ не работает.
Могли бы уточнить что вы имели ввиду, и как translateZ может помочь ситуации в данном случае ?

 

[bobus256]

Аналогичный баг (показ артефактов) замечен в Хроме