CSS3 преобразования вызывают мерцание экрана или псевдоним шрифта

Question

Я пытаюсь применить некоторые CSS3-преобразования к элементам, и есть две проблемы. Веб-страница содержит множество заметок, и я хочу увеличить их при щелчке (масштабировать) или щелкнуть по ним (повернуть), применив классы CSS с некоторым JavaScript.

Например, класс увеличения выглядит так:

.postit-container.enabled {
  z-index: 15;
  -webkit-transition: -webkit-transform 0.15s ease-in-out;
  -moz-transition: -moz-transform 0.15s ease-in-out;
  -o-transition: -o-transform 0.15s ease-in-out;
  -ms-transition: -ms-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}

Для эффекта переворачивания я использую только rotateY(180deg) на :hover.

Для каждого стикера применяется вращение по умолчанию в 6 градусов, и я имитирую случайное вращение с помощью селектора nth-child CSS3 для применения различных вращений.

Проблема в том, что при масштабировании или переворачивании и экран случайным образом мерцает, некоторые шрифты на странице изменяются и выглядят некрасиво, но не все, что действительно странно.

Вот jsfiddle, чтобы вы могли увидеть проблему самостоятельно:

JSfiddle (протестировано с Google Chrome 12.0.742.122 на Mac OS X 10.6.8)

Я уже попробовал трюк -webkit-backface-visibility, мерцание исчезло при аминировании и преобразуется наверняка , но шрифты выглядят некрасиво все время .

Я надеюсь, что у кого-то есть фокус, потому что я действительно не понимаю этого поведения.

Answer 1

Не могли бы вы поместить примеры в jsfiddle, скриншоты не очень хорошо иллюстрируют проблему.

Однако я столкнулся с подобной проблемой, но не смог найти причину проблемы. Или придумайте объяснение того, что может происходить.

Однако я нашел решение, которое сработало в моем случае.

-webkit-transform-style: preserve-3d;

Я применил его ко всем элементам, которые, казалось, имели проблемы с рендерингом. В моем случае некоторые элементы, которые не переносятся или даже не находятся в одном и том же контейнере, а выполняются на первый взгляд случайным и непоследовательным образом.

что-то вроде.

.header *, .sticky * {
    -webkit-transform-style: preserve-3d;
}

Я бы с удовольствием объяснил, что делает preserve-3d, однако я нашел документацию довольно двусмысленной.

Суть того, что я понял, заключается в том, что он может решить проблему (что и было), и у него есть два свойства

-webkit-transform-style: preserve-3d;
//and
-webkit-transform-style: flat;

Квартира используется по умолчанию.

Извините, я не смог дать более подробный ответ, но я надеюсь, что это решит проблему для вас.

Если кто-то работает над webKit, не могли бы вы предоставить и объяснить, что это на самом деле делает.

Answer 2

Попробуйте добавить следующее в ваш CSS:

-webkit-transform: translateZ(0);

это заставит аппаратное ускорение для Chrome, поскольку Chrome часто решает не использовать его на основе CSS

Answer 3

У меня такая же проблема. Очень долго находил решение, но наконец нашел его.

Просто добавьте класс .no-flickr к любому проблемному объекту на вашем сайте, и вы увидите правильную анимацию без ошибок.

Смотрите это http://jsfiddle.net/DaPsn/92/

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

Answer 4

Я вижу, ваш текст просто сглажен.Попробуйте добавить 3d-преобразование, например rotateZ(0), чтобы исправить это.