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

bobus256

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

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

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


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

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

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

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

Или я куда то не туда добавляю или translateZ не работает.
Могли бы уточнить что вы имели ввиду, и как translateZ может помочь ситуации в данном случае ?
 
Аналогичный баг (показ артефактов) замечен в Хроме
 
Назад
Сверху