This multi-step wizard is designed to smoothly transition between its 3 steps. Upon clicking the "next" button in step 1, the content is pushed down to reveal step 2. Similarly, when advancing from step 2 to step 3, the contents of both previous steps are flipped over to display the final step.
While I have achieved success with animating card flips in Safari using absolute heights and dynamic container growth, combining these two functionalities has proven challenging specifically in Safari. The behavior works seamlessly in Chrome and Firefox, as illustrated in this Bootply.
<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>
Although the card flip functionality is working in the provided Bootply, the challenge lies in getting the container background to properly render and expand along with the growing card. Absolute heights cannot be utilized due to dynamic content within each step.
I welcome any assistance or suggestions on resolving this issue for a seamless experience across all browsers, particularly in Safari.