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