CSS3-Übergang verschiebt gedrehtes Element in Safari um 1px

Safari kann 180-Grad-gedrehtes Element nicht richtig darstellen. Insbesondere gibt es zwei Beispiele, wenn es (verwendete Safari 9.1) gezeigt werden kann:CSS3-Übergang verschiebt gedrehtes Element in Safari um 1px

Issue with odd width. Sie (sehen Sie die Grenze) können sehen, dass das Bodenelement 1px rechts gegen ihre Mutter div zunächst verschoben und verschiebt mehr auf Übergang.
Issue with even width. Es sieht zunächst gut aus, aber auch 1px verschiebt sich direkt am Übergang.

Hier CSS für selbst Fall (in ungeraden es nur alle Breiten und Höhen 1px abgezogen):

.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; 
    }

Und 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>

Es funktioniert ganz gut in Chrome (52) und Firefox (47).

Also irgendwelche Vorschläge, wie man es in Safari beheben kann?

Quelle

2016-08-11 Alexey.Z.