Animating Dynamic Sized Content with CSS in Safari

Question

This wizard has 3 steps. I want to animate the transitions between the 3 steps. On the first step, the user can click a "next" button. When they do this, the content of step 1 is pushed down and step 2 is revealed. Step 2 also has a "next" button that the user can click. When clicked, the content of step1 and step 2 are flipped over to show the content in step 3.

I have been successful in getting the card to flip in Safari if I use absolute heights. I have been able to get the container to dynamically grow as I need in Safari. However, I've been unable to get these two things to work together in Safari. I was able to do so in Chrome and Firefox though.

Currently, I have the following Bootply. Which has the following structure:

  <section class="container">
    <div id="card">
      <figure 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>
      </figure>

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

In this Bootply, the card flipping works. But, the container isn't rendering properly. I'm trying to get the lightgrey background behind the card to grow as the card grows. The background should grow when step 2 is revealed. But it doesn't. I can't use absolute heights because the content in each step is dynamic.

I've been able to get the background to dynamically grow. Or, I've been able to get the card to flip properly. But, I can't get them to work together in Safari.

Any help is appreciated.

Answer 1

I think you're unnecessarily complicating things. We can just use a border here:

#card figure {
    border: 10px solid #808080;
    display: block;
    height: auto;
    width: 100%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

http://www.bootply.com/7Q9RMtpv3F