it-swarm.com.ru

Как предотвратить изменение рендеринга текста Webkit при переходе CSS

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

Скрипка: http://jsfiddle.net/russelluresti/UeNFK/

Я также заметил, что этого не происходит в моих заголовках, в которых есть пара свойство/значение -webkit-font-smoothing: antialiased. Итак, мне интересно, есть ли способ, чтобы текст сохранял свой внешний вид по умолчанию ("автоматическое" значение для сглаживания шрифтов) и не изменял рендеринг во время перехода.

Я попытался явно установить текст для использования значения "auto", но это ничего не делает. Следует также отметить, что установка сглаживания шрифтов на "none" также предотвращает мигание рендеринга во время перехода.

Любая помощь приветствуется.

Редактировать 1

Я должен отметить, что я нахожусь на OS X. Глядя на мой тест в Chrome на Parallels, я не видел, как два разных абзаца ведут себя по-разному, так что это может быть проблемой исключительно для Mac.

80
RussellUresti

Я думаю, что нашел решение:

-webkit-transform: translateZ(0px);

принудительное аппаратное ускорение на родительском элементе, похоже, решает проблему ...

EDIT Как прокомментировано, этот хак отключает сглаживание шрифтов и может ухудшить отображение текста в зависимости от ваших шрифтов, браузера и ОС!

80
Armel Larcier

ОБНОВЛЕНИЕ май 2018

-webkit-font-smoothing: subpixel-antialiased теперь не действует в Chrome, но в Safari он все еще значительно улучшает НО ТОЛЬКО НА RETINA. Без этого в Safari на экранах сетчатки текст тонкий и безвкусный, тогда как с ним текст имеет правильный вес. Но если вы используете это на дисплеях без сетчатки в Safari (особенно при легких значениях), текст - это катастрофа. Настоятельно рекомендуем использовать медиа-запрос:

@media screen and (-webkit-min-device-pixel-ratio: 2) { body { -webkit-font-smoothing: subpixel-antialiased; } }


Явная установка -webkit-font-smoothing: subpixel-antialiased является наилучшим текущим решением, если вы хотите хотя бы частично избежать более тонкого сглаженного текста.

--tl; dr--

Как в Safari, так и в Chrome, где при рендеринге шрифтов по умолчанию используется субпиксельное сглаживание, любой CSS, который вызывает рендеринг на основе графического процессора, например, приведенные выше рекомендации по использованию преобразования с использованием translateZ или даже просто масштабного перехода, вызовет Safari и Chrome, чтобы автоматически "сдаться" при сглаживании субпиксельных шрифтов и вместо этого переключиться на просто сглаженный текст, который выглядит намного легче и тоньше, особенно в Safari.

Другие ответы были направлены на поддержание постоянного рендеринга путем простой установки или принудительного сглаживания шрифта для более тонкого сглаженного текста. На мой взгляд, использование translateZ или скрытой задней стороны значительно ухудшает качество рендеринга текста, и лучшее решение, если вы хотите, чтобы текст оставался непротиворечивым, а с более тонким текстом все в порядке, просто используйте -webkit-font-smoothing: antialiased. Тем не менее, явная установка -webkit-font-smoothing: subpixel-antialiased на самом деле имеет некоторый эффект - текст по-прежнему немного изменяется и становится заметно тоньше при переходах, отображаемых на графическом процессоре, но не так тонко, как без этой настройки. Так что, похоже, это хотя бы частично предотвращает переход на прямой сглаженный текст.

45
atomless

Я заметил, что почти каждый раз, когда у меня возникают проблемы с графикой (мерцание/заикание/прерывистость/и т.д.) Из-за перехода, использующего -webkit-backface-visibility: hidden; на элементы, которые действуют вверх, имеет тенденцию решать проблему.

19
Jordan Borth

Чтобы предотвратить изменения рендеринга текста из-за аппаратного ускорения, вы можете:

  1. Установите весь текст в -webkit-font-smoothing: сглаживание. Это означает, что текст тоньше и не сглаживается на субпикселях.

  2. Если вы хотите, чтобы текст, на который влияет аппаратное ускорение, был сглажен на субпикселе (тип сглаживания шрифта по умолчанию), то помещение этого текста внутрь ввода без границ и отключений будет поддерживать сглаживание этого субпикселя (как минимум в Chrome в Mac OS X). Я не проверял это на других платформах, но если субпиксельное сглаживание важно, вы можете по крайней мере использовать этот трюк.

8
Joran Greef

Если вы используете Firefox на Mac, вы можете использовать следующую CSS для решения этой проблемы.

-moz-osx-font-smoothing: grayscale;

Подробнее об этом на Сглаживание и сглаживание Webfont в Firefox и Opera

5
eleclair

Это то, что сработало для меня. Надеюсь, поможет. Нашел в другом сообщении stackoverflow.

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;
3
Daniel Almeida

В дополнение к вышеупомянутым решениям (-webkit-transform: translateZ(0px) на элементе и -webkit-font-smoothing: antialiased на странице) некоторые элементы могут по-прежнему работать плохо. Для меня это был заполнитель текста в элементе ввода: для этого используйте position:relative

1
WraithKenny

Чтобы предотвратить изменение рендеринга, вам нужно установить font-smoothing: antialiased (или none).

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

Apple часто отключает субпиксельное сглаживание шрифтов на своихсобственных сайтах.

1
Henrik