Текст Webkit мерцает при использовании преобразования CSS (масштаб)

Это происходит в Safari 6 на Mountain Lion и в последнем хроме. (подтверждено в OSX, может не произойти в Windows)

См. эту страницу для примера:

http://users.telenet.be/prullen/flicker2.html

Быстро передвиньте мышь и снимите изображение и посмотрите на текст ниже. Вы увидите, что он мерцает/пульсирует.

Соответствующий CSS ниже. Я не могу внести никаких изменений в классы .out и .in. Только для класса элемента.

Я попытался добавить -webkit-backface-visibility:hidden;, как я где-то читал, что это должно исправить, но это не имеет никакого значения.

Кто-нибудь знает?

Спасибо, Wesley

.out {                                      
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                                      
   border:            0;
   padding:        0;                                      
   margin-left:    auto;                                       
   margin-right:    auto;                                      
   overflow:        hidden;    
 }
.in {                                   
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                           
   padding:        0;                            
   border:            0;
   overflow:        hidden;
}
.item {
   margin: 60px;
   -webkit-transition: -webkit-transform .15s linear;
   -moz-transition: -moz-transform .15s linear;
   -o-transition: -o-transform .15s linear;
   transition: transform .15s linear;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style : preserve-3d;
   -ms-transform-style : preserve-3d;
}
.item:hover {
   -webkit-transform: scale(1.3) !important;
   -moz-transform: scale(1.3) !important;
   -o-transform: scale(1.3) !important;
   -ms-transform: scale(1.3) !important;
   transform: scale(1.3) !important;
}

Ответы

Ответ 1

У меня такая же проблема: я хочу масштабировать элемент при наведении курсора, и при этом каждый текст на странице мерцает. Я также на последнем Chrome (21.0.1180.89) и OSX Mountain Lion.

Собственно, добавив

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

для затронутых элементов выполняет решение проблемы.

Вы сказали, что не можете изменить классы .in и .out, но, возможно, вы можете добавить еще один (.no-мерцание) и использовать его на затронутых элементах.

Примечание. Это действительно помогает устранить проблему в Chrome, но обратите внимание, что это может вызвать некоторые проблемы в Safari, если у вас есть элементы, накладываемые с помощью z-позиционирования свойств CSS. Например, на моем сайте он заставляет элемент CSS мерцать за переходами слайдов анимационного слайд-шоу, которое я пытаюсь очистить.

Ответ 2

У меня та же проблема, но исправьте ее. Смотрите http://codepen.io/artemmedvedev/pen/uLwvo

Просто добавьте класс .no-flickr к любому мигающему или мерцающему элементу вашего проекта

.no-flickr {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

Ответ 3

У меня была такая же проблема сегодня утром, и я обнаружил, что лучшим решением было:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

Я добавил это к каждому из двух элементов, которые составляют лица двухстороннего объекта. Остановил мерцание в Chrome и зафиксировал обратную сторону, отображаемую в Safari.