Safari меняет вес шрифта, когда запущены несвязанные анимации

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

z-index: 60000;
position: relative;

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