Css轉換 - 鉻閃爍

Question

我正在嘗試對元素進行簡單的「翻轉」轉換。它在Firefox中運行得非常好，但是在Chrome中我得到了一個可怕的閃爍。

搜索並嘗試很多事情後，包括將-webkit-backface-visibility: hidden;添加到過渡元素，我找不到修復程序。

任何想法？

Here's a fiddle to show what I mean

下面是我使用的代碼：

$('#passwordStrength__flipper').click(function() { 
 
    $(this).toggleClass('flipped'); // for testing, click the element 
 
});

.passwordStrength { 
 
    clear: both; 
 
    width: 99%; 
 
    position: relative; 
 
    padding-bottom: 0px; 
 
    height: 240px; 
 
    /* set viewing perspective */ 
 
    -webkit-perspective: 800px; 
 
    -moz-perspective: 800px; 
 
    -ms-perspective: 800px; 
 
    -o-perspective: 800px; 
 
    perspective: 800px; 
 
} 
 
.passwordStrength #passwordStrength__flipper { 
 
    width: 100%; 
 
    height: 200px; 
 
    position: absolute; 
 
    background-color: #EAEAEA; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
    -webkit-transition: -webkit-transform 1s; 
 
    -moz-transition: -moz-transform 1s; 
 
    -ms-transition: -ms-transform 1s; 
 
    -o-transition: -o-transform 1s; 
 
    transition: transform 1s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
.passwordStrength #passwordStrength__flipper.flipped { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
.passwordStrength #passwordStrength__flipper figure { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    margin: 0; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.passwordStrength #passwordStrength__flipper .passwordStrength__criteriaHolder { 
 
    display: block; 
 
    padding: 6px; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
} 
 
.passwordStrength #passwordStrength__flipper .passwordStrength__criteriaHolder #passwordStrength__suggestions { 
 
    width: 100%; 
 
    margin-top: 8px; 
 
    color: #999; 
 
    position: relative; 
 
} 
 
.passwordStrength #passwordStrength__flipper .passwordStrength--success { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #00C2A2; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    padding: 14px 30px; 
 
    line-height: 26px; 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="passwordStrength" id="password_popup_inline"> 
 
    <div id="passwordStrength__flipper"> 
 
    <figure class="passwordStrength__criteriaHolder">Click me...</figure> 
 
    <figure class="passwordStrength--success">...then click me</figure> 
 
    </div> 
 
</div>

Answer 1

嘗試增加-webkit-backface-visibility: hidden;到.passwordStrength #passwordStrength__flipper.flipped

這裏的小提琴：http://jsfiddle.net/4p93v6oj/1/

UPDATE：

新小提琴：http://jsfiddle.net/4p93v6oj/2/

正如其他低於所指出的，第一個解決方案不起作用，因爲Click事件不會元素上註冊時，背面是隱藏的。

我修改了jQuery來觸發外部元件上的點擊事件，如下所示：

$('.passwordStrength').click(function() { 
     $('#passwordStrength__flipper').toggleClass('flipped'); 
    }); 

然後向背面能見度.passwordStrength #passwordStrength__flipper