Question

对两个绝对定位的元素进行CSS转换会导致它们干扰 iPhone 6 （通常可能是iOS）。仔细观察会发现过渡期间出现一些闪烁现象。我尝试了各种z-index和3D变换黑客，但到目前为止没有任何成功，所以我有点倾斜atm :(

<div class="flip-container c1">
    <div class="flipper">
        <div class="front"><!-- front content --></div>
        <div class="back"><!-- back content --></div>
    </div>
</div>

<div class="flip-container c2">
    <div class="flipper">
        <div class="front"><!-- front content --></div>
        <div class="back"><!-- back content --></div>
    </div>
</div>

<button onclick="$('.c2').toggleClass('flipped')">btn1</button>

的CSS：

/* entire container, keeps perspective */

.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    margin: 50px auto;
    position: absolute;
    top: 0;
    border: 1px solid grey;
}
/*  UPDATED! flip the pane when hovered */

.flip-container.flipped .back {
    transform: rotateY(0deg);
}

.flip-container.flipped .front {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 320px;
    height: 380px;
}
/* flip speed goes here */

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */

.front,
.back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
/*  UPDATED! front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
}
/* back, initially hidden pane */

.back {
    transform: rotateY(-180deg);
    background: lightblue;
}

.c1 .front {
    background: lightgrey;
}

.c2 .front {
    background: teal;
}

链接到一个示例： http://codepen.io/AlphaVision/pen/avrVoj

iPhone 6 CSS过渡闪烁问题

0 个答案: