Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1):
- Odd width problem. The bottom element shifts to the right initially, and further on transition.
- Even width problem. It appears fine at first but shifts right on transition.
Here's the CSS for the even case:
.no-overflow-container {
width: 518px;
height: 368px;
margin: 10px;
overflow: hidden;
}
.container {
width: 368px;
height: 368px;
background: red;
margin-right: 30px;
-webkit-transition: margin 350ms;
-moz-transition: margin 350ms;
transition: margin 350ms;
}
.container:hover {
margin-left: 150px;
}
.threed-container {
width: 100%;
height: 100%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
position: relative;
box-sizing: border-box;
}
.faced-item {
width: 100%;
height: 100%;
border: 1px solid black;
font-size: 28px;
position: absolute;
padding: 30px;
box-sizing: border-box;
}
.rotated-item {
width: 100%;
height: 100%;
border: 1px solid black;
font-size: 28px;
position: absolute;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
}
And the HTML:
<div class="no-overflow-container">
<div class="container">
<div class="threed-container">
<div class="faced-item">
HELLO WORLD FACE
</div>
</div>
</div>
</div>
<div class="no-overflow-container">
<div class="container">
<div class="threed-container">
<div class="rotated-item">
HELLO WORLD BACKFACE
</div>
</div>
</div>
</div>
Works well in Chrome(52) and Firefox(47). Any suggestions on fixing this in Safari?