CSS翻转器 - iOS/Safari问题

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 属性。我使用它是因为我的向导中每个步骤的内容大小都是动态的。在 Chrome 中可以正常工作。但是，我无法弄清楚如何使其在 iOS / Safari 中工作。任何帮助将不胜感激。

- Some User

---

你能澄清一下这个吗：“你会注意到步骤在第1步和第2步中都是可见的”。 - Ced

@ Ced 请在Safari中查看Bootply。您会注意到在第三步中，“内容透视”。如果您正在查看一张扑克牌，您不希望看到牌子透过去。但是，在这个Bootply中确实发生了这种情况。感谢您对此问题的帮助和关注。 - Some User

请澄清一下，您的问题是如何在Safari和iOS中完全使其工作，还是防止内容显示出来？ - Erin

Answer 1

您缺少一个针对webkit浏览器的特定属性backface-visibility:

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

http://www.bootply.com/RiX9HF5t21

- Serg Chernata

Answer 2

这在Safari中可以使用（测试过），只需将background-color:transparent;更改为background-color:#fff;，并为类.step-1-default、.step-2-default添加：

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

- Molarosa

---

我将那行代码复制粘贴到了我发布的 Bootply 中。然而，在 Safari（或 iOS）中它并没有起作用。 - Some User

你是否将 .step-1-default 和 .step-2-default 类的 background-color: transparent 更改为 background-color: #fff？ - Molarosa

我进行了那些更改，但没有任何效果。 - Some User

Answer 3

为了防止Safari和iOS中显示另一面，请在“front”和“back”类上设置背景颜色：

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

- Erin