When using translate3d to move an absolute positioned object, while also using perspective to modify the translate3d view, Safari does not function the same as other browsers.
Image with visual representation of issue
If the object is not positioned absolutely, the issue does not occur and Safari functions the same as other browsers.
Codepin for example view in Safari vs Chrome
edit:I forgot to mention that the Safari issue also applies to the content inside the object with translate3d applied. Content inside like links or buttons are not clickable at its visual representation location, instead it appears to be at where the visual "should" be. I have added a button to codepin and code to demonstrate.
jQuery(document).ready(function($) {
$(".clickme").click(function() {
$("body").toggleClass("toggle");
});
});body {
margin: 0;
}
.outer-box {
perspective: 900px;
}
.box {
padding: 100px 15%;
background: #000;
color: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100vh;
overflow: scroll;
box-sizing: border-box;
text-align: center;
}
.toggle .box {
transform: translate3d(0px, 100px, -200px);
}
.clickme {
cursor: pointer;
float: right;
position: relative;
z-index: 1;
background: pink;
padding: 20px;
}
button {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickme">X</div>
<div class="outer-box">
<div class="box">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo.<br><button>Click Me!</button></div>
</div>
