移动Safari显示隐藏的背面，当在标签视图

Question

我做了一个简单的翻转元素使用常用的技术，并发现一些奇怪的行为在移动Safari iOS iOS 7 （旧版本也可能会受到影响，不幸的是我无法测试它们目前旧版本也似乎受到影响），请参阅下面的图像或visit a demo directly on your iOS device。

1. Editable markup and stylesheet
2. Full screen view to visit on your iOS device

<div class="flippable"> 
    <input id="flippable-trigger" type="checkbox"> 
    <label for="flippable-trigger" class="flippable-faces"> 
     <div class="flippable-face-front"> 
      Front 
     </div> 
     <div class="flippable-face-back"> 
      Back 
     </div> 
    </label> 
</div> 

body { 
    font: 1em/0 Arial; 
    background-color: silver; 
} 

.flippable { 
    position: relative; 
    float: left; 
    width: 10rem; 
    height: 10rem; 
    -webkit-perspective: 800; 
} 

.flippable input[type="checkbox"] { 
    display: none; 
} 

.flippable-faces, 
.flippable-face-front, 
.flippable-face-back { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

.flippable-faces { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 600ms; 
} 

.flippable-face-front, 
.flippable-face-back { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    line-height: 10rem; 
    text-align: center; 
    -webkit-box-shadow: 0 0 1rem gray; 
    -webkit-backface-visibility: hidden; 
} 

.flippable-face-front { 
    color: black; 
    background-color: white; 
} 

.flippable-face-back { 
    color: white; 
    background-color: black; 
    -webkit-transform: rotateY(180deg); 
} 

.flippable input[type="checkbox"]:checked ~ .flippable-faces { 
    -webkit-transform: rotateY(180deg); 
} 

Answer 1

似乎重新定位您的divs可以解决问题。尽管如此，我还没有答案。抱歉。 Working Example | Example for iPhone

<div class="flippable"> 
    <input id="flippable-trigger" type="checkbox" > 
    <label for="flippable-trigger" class="flippable-faces"> 
     <div class="flippable-face-back"> 
      Back 
     </div> 
     <div class="flippable-face-front"> 
      Front 
     </div> 
    </label> 
    </input> 
</div>