CSS Flipper - iOS / Safari Issue

Question

I have a web page that emulates a wizard. After the user leaves the second step to go to the third step, I'm "flipping" the panel like a card. You can see it in action in this Bootply. The code looks like this:

<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 load the Bootply, you'll notice that the step is visible from steps 1 and 2. From my understanding, the issue is the height:auto property. I'm using this because the size of the content 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're missing a webkit-specific backface-visibility:

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

http://www.bootply.com/RiX9HF5t21

Answer 2

That works for me in Safari (tested), just change the background-color:transparent; to background-color: #fff; for classes .step-1-default, .step-2-default and add:

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