CSS Flipper - issue with iOS / Safari

Question

I have a webpage that emulates a wizard. After the user leaves the second step to go to the third step, I “leaf through” the panel as a card. You can see it in action in this Bootply . The code is as follows:

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

If you download Bootply, you will notice that this step is shown in steps 1 and 2. From my understanding, the problem is the height:auto property. I use this because the content size for each of the steps in my wizard is dynamic.

It works fine in Chrome. But I can't figure out how to make it work in iOS / Safari. Any help is appreciated.

Answer 1

You are missing the backface-visibility for the web quote:

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

http://www.bootply.com/RiX9HF5t21

Answer 2

This works for me in Safari (verified), just change background-color:transparent; on background-color: #fff; for classes .step-1-default , .step-2-default and add:

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

Answer 3

To avoid seeing the other side in Safari and iOS, set the background color in the front and back classes:

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