Javascript-форум (https://javascript.ru/forum/)
-   Opera, Safari и др. (https://javascript.ru/forum/css-html-browser/)
-   -   Проблема с transform и z-index в Safari (https://javascript.ru/forum/css-html-browser/73718-problema-s-transform-i-z-index-v-safari.html)

bobus123 09.05.2018 05:36

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

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

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


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

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

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

Aetae 09.05.2018 14:06

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

bobus123 09.05.2018 18:33

Без решения тыкать на угад.... можно до бесконечности ...


Часовой пояс GMT +3, время: 09:12.