Вход

Просмотр полной версии : Проблема с transform и z-index в Safari


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

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

Выглядит примерно так
https://i.stack.imgur.com/16o7Y.jpg

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

Примерный код тут - https://codepen.io/hela/pen/YLNVab.

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

Aetae
09.05.2018, 14:06
Попробуй поэкспериментировать с translateZ, предполагаю проблема в том, что при переносе в 3d пространство плоскость оказываются в одной точке и происходит классическое наложение. Но никаких гарантий, только предположение.)

bobus123
09.05.2018, 18:33
Без решения тыкать на угад.... можно до бесконечности ...