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

Я пытаюсь применить некоторые CSS3-преобразования к элементам, и есть две проблемы. На веб-странице есть много заметных заметок, и я хочу увеличить масштаб (масштабирование) или перевернуть по ним (rotateY), применяя классы 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.

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

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

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

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

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

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

Ответ 1

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

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

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

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

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

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

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

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

О сути того, что я собрал, является то, что он может исправить проблему (что она и сделала) и имеет два свойства

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

Плоский используется по умолчанию.

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

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

Ответ 2

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

-webkit-transform: translateZ(0);

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

Ответ 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);
}

Ответ 4

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