移动Safari在标签视图中显示隐藏的背面

Question

我使用常见技术制作了一个简单的可翻转元素，并在iOS 7上的移动Safari中发现了一些奇怪的行为（旧版本也可能受到影响，遗憾的是我现在无法测试它们< / del>旧版本似乎也受到影响），请参阅下面的图片或visit a demo directly on your iOS device。

1. Editable markup and stylesheet
2. Full screen view to visit on your iOS device

<div class="flippable">
    <input id="flippable-trigger" type="checkbox">
    <label for="flippable-trigger" class="flippable-faces">
        <div class="flippable-face-front">
            Front
        </div>
        <div class="flippable-face-back">
            Back
        </div>
    </label>
</div>

body {
    font: 1em/0 Arial;
    background-color: silver;
}

.flippable {
    position: relative;
    float: left;
    width: 10rem;
    height: 10rem;
    -webkit-perspective: 800;
}

.flippable input[type="checkbox"] {
    display: none;
}

.flippable-faces,
.flippable-face-front,
.flippable-face-back {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flippable-faces {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 600ms;
}

.flippable-face-front,
.flippable-face-back {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 10rem;
    text-align: center;
    -webkit-box-shadow: 0 0 1rem gray;
    -webkit-backface-visibility: hidden;
}

.flippable-face-front {
    color: black;
    background-color: white;
}

.flippable-face-back {
    color: white;
    background-color: black;
    -webkit-transform: rotateY(180deg);
}

.flippable input[type="checkbox"]:checked ~ .flippable-faces {
    -webkit-transform: rotateY(180deg);
}

Answer 1

看来重新定位你的div可以解决这个问题。我没有回答为什么会发生这种情况。抱歉。 Working Example | Example for iPhone

<div class="flippable">
    <input id="flippable-trigger" type="checkbox" >
    <label for="flippable-trigger" class="flippable-faces">
        <div class="flippable-face-back">
            Back
        </div>
        <div class="flippable-face-front">
            Front
        </div>
    </label>
    </input>
</div>