Safari изменяет вес шрифта при работе несвязанных анимаций

Question

Я использую css-анимацию на своей странице, и Safari, похоже, меняет несвязанные веса шрифтов в других местах на странице, когда анимации запущены.Есть идеи, почему это происходит?Все остальные браузеры работают нормально, включая такие, как Chrome.

Я подробно описал ошибку в видео здесь - http://www.screenr.com/gZN8

Сайт также здесь - http://airport -r7.appspot.com / но этоможет быстро меняться.

Я использую компас (@ transition-property, @ transition-duration) на значках стрелок.На мигающем заголовке переходы не применяются.На Mac - это может быть аппаратное ускорение, но я все еще пытаюсь понять это.

Answer 1

Когда вы запускаете компоновку на GPU (например, с помощью CSS-анимации), браузер отправляет этот элемент в GPU, но также и все, что будет отображаться поверх этого элемента, если его верхние / левые свойства были изменены. Это включает любую позицию: относительные элементы, которые появляются после анимации.

Решение состоит в том, чтобы задать положение элемента анимации: относительный и z-индекс, который ставит его выше всего остального. Таким образом вы получаете анимацию, но сохраняете субпиксельный рендеринг шрифта (улучшенный IMO) на несвязанных элементах.

Вот демонстрация проблемы и решения http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

Обновление: В более новых версиях Chrome субпиксельное сглаживание сохраняется в элементах, составленных из графического процессора, до тех пор, пока элемент не имеет прозрачности, например, имеет фон без прозрачных или полупрозрачных пикселей. Обратите внимание, что такие вещи, как border-radius, вводят полупрозрачные пиксели.

Answer 2

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

Однако применение html {-webkit-font-smoothing: antialiased} для отключения субпиксельного сглаживания устраняет эту проблему. Это то, чем я сейчас занимаюсь.

ОБНОВЛЕНИЕ: С тех пор я также узнал, что это происходит только тогда, когда браузер не может быть уверен, что анимируемый раздел повлияет на текст. Обычно это можно сделать, поместив текст выше (выше z-index), чем анимированные элементы, и / или убедившись, что текст имеет полностью непрозрачный фон.

Answer 3

Я сталкивался с этой проблемой много раз и добился успеха при добавлении следующего анимационного элемента к анимированному элементу:

z-index: 60000;
position: relative;

Похоже, ему нужны позиции z-index и длябыть эффективным.В моем случае я использовал его с анимированными прядильщиками Font Awesome.