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中运行。任何帮助表示赞赏。

Answer 1

您缺少特定于网络工具包的backface-visibility：

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

http://www.bootply.com/RiX9HF5t21

Answer 2

这适用于Safari（已测试），只需将background-color:transparent;更改为background-color: #fff;类.step-1-default，.step-2-default并添加：

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

Answer 3

防止在Safari和＆amp ;;中看到另一面。 iOS，在front和back类上设置背景颜色：

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

CSS Flipper - iOS / Safari问题

3 个答案: