I'm attempting to implement Parallax Scrolling using CSS Perspective, but Safari applies negative transforms differently from Chrome and Firefox.
Here is an image showing the issue. Left is Safari, right is Firefox
The intended behavior is that of Firefox. Chrome works exactly as Firefox does.
Here is the jsfiddle showing the issue
<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);
}
Is there any way of achieving the correct parallax effect on Safari without breaking the functionality on other browsers, especially when taking into account multiple parallax layers?
