移動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>