सीएसएस फ्लिपर - आईओएस/सफारी अंक

Question

मेरे पास एक वेब पेज है जो एक विज़ार्ड का अनुकरण करता है। उपयोगकर्ता तीसरे चरण में जाने के लिए दूसरा कदम छोड़ने के बाद, मैं एक कार्ड की तरह पैनल को "फ़्लिप" कर रहा हूं। आप इसे Bootply में कार्रवाई में देख सकते हैं। कोड इस तरह दिखता है:

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

आप Bootply लोड करते हैं, तो आप देखेंगे कि कदम चरण 1 और 2. मेरी समझ से से दिखाई दे रहा है, इस मुद्दे height:auto संपत्ति है। मैं इसका उपयोग कर रहा हूं क्योंकि मेरे विज़ार्ड में प्रत्येक चरण के लिए सामग्री का आकार गतिशील है।

यह क्रोम में ठीक काम करता है। लेकिन, मैं यह नहीं समझ सकता कि इसे आईओएस/सफारी में कैसे काम करना है। किसी भी मदद की सराहना की है।

Answer 1

आप एक वेबकिट विशेष backface-visibility छूट रहा है:

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

http://www.bootply.com/RiX9HF5t21

Answer 2

कि सफारी में मेरे लिए काम करता (परीक्षण किया), बस background-color:transparent;background-color: #fff; को कक्षाओं .step-1-default, .step-2-default के लिए बदल सकते हैं और जोड़ें:

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

Answer 3

दूसरी तरफ सफारीमें दिखाई देने से रोकने के लिए

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