CSS Flipper - iOS/Safari Issue

Question

Mam stronę internetową emulującą kreatora. Po tym, jak użytkownik opuści drugi krok, aby przejść do trzeciego kroku, "odwracam" panel jak kartę. Możesz zobaczyć go w akcji w tym Bootply. Kod wygląda następująco:

<div class="container-fluid" style="background-color:#eee;"> 
    <div class="container"> 
    <div class="flip-container" style="width:200px;"> 
     <div class="flipper"> 
     <div class="front"> 
      <div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;"> 
      <label>Step 2</label> 
      <p>These are the details of the second step</p> 
      <button id="nextButton2">next</button>   
      </div> 

      <div class="step-1-default" id="step1"> 
      <label>Step 1</label> 
      <p>These are the details of the first step</p> 
      <button id="nextButton1">next</button> 
      </div> 
     </div> 

     <div class="back"> 
      <div id="step3"> 
      <label>Step 3</label> 
      <p>Thank you for using this wizard</p> 
      </div>         
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Jeśli załadować Bootply, można zauważyć, że etap jest widoczny z etapów 1 i 2. Z mojego zrozumienia, że ​​problem jest własnością height:auto. Używam tego, ponieważ rozmiar zawartości każdego z kroków w moim kreatorze jest dynamiczny.

Działa dobrze w przeglądarce Chrome. Ale nie wiem, jak sprawić, by działał w iOS/Safari. Każda pomoc jest doceniana.

Answer 1

Teraz brakuje WebKit specyficzne backface-visibility:

.front, .back { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

http://www.bootply.com/RiX9HF5t21

Answer 2

To działa na mnie w Safari (testowane), wystarczy zmienić background-color:transparent; do background-color: #fff; dla klas .step-1-default, .step-2-default i dodać:

.flip-container.flip .front { 
    display: none; 
} 

Answer 3

Aby zapobiec widoczności drugiej strony w Safari & iOS, ustawić kolor tła na zajęciach front i back:

.front, .back { 
    width: 100%; 
    height: auto; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    background-color: #FFF; 
}