Я пытаюсь реализовать Parallax Scrolling с использованием CSS Perspective, но Safari применяет негативные преобразования не так, как Chrome и Firefox.
Вот изображение, показывающее проблему.Слева - Safari, справа - Firefox
Предполагаемое поведение - Firefox.Chrome работает точно так же, как Firefox.
Вот jsfiddle, показывающий проблему
<body>
<div class="parallax_root">
<div class="prlx back_cat">
<img src="http://lorempixel.com/200/800/cats/">
</div>
<div class="prlx front_food">
<img src="http://lorempixel.com/800/200/food/">
</div>
</div>
</body>
.parallax_root {
height: 100vh;
position: relative;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.prlx {
position: absolute;
}
.back_cat {
transform: translateZ(-1px);
}
.front_food {
transform: translateZ(-2px);
}
Есть ли способ добиться правильного эффекта параллакса в Safari?без нарушения функциональности в других браузерах, особенно если учитывать несколько слоев параллакса?