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/

Как и другие ниже указывалось, первое решение не работает, так как событие щелчка не регистрируется на элементе, когда противоположная сторона скрыта.

Я изменил JQuery активаций события щелчка на внешнем элементе, как показано здесь:

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

Затем добавляют видимость отсев к .passwordStrength #passwordStrength__flipper