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

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

Сценарий: http://jsfiddle.net/russelluresti/UeNFK/

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

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

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

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

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

Думаю, я нашел решение:

-webkit-transform: translateZ(0px);

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

ИЗМЕНИТЬ Как уже отмечалось, этот хак отключает сглаживание шрифтов и может ухудшить рендеринг текста в зависимости от ваших шрифтов, браузера и ОС!

ОБНОВЛЕНИЕ Август 2020

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

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

1. Это рендеринг светлого текста на темном фоне в Chrome.
2. Это рендеринг темного текста на светлом фоне в Chrome.

Посмотрите на размер целого на букву е выше. Светлый текст на темном фоне визуализируется с заметно более тяжелым весом, чем темный текст на светлом фоне (с идентичным стилем шрифта css).

Одно из решений для сайтов, соблюдающих настройку темной / светлой темы пользователя, - настроить таргетинг на Chrome медиа-запросом, который ограничен темным режимом, и переключить его на сглаживание без субпикселей, например:

@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

Результат :

Гораздо более стабильный вес текста независимо от того, отображает ли он свет на темном или темный на светлом.

Посмотрите параллельное сравнение до и после:

-

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

-webkit-font-smoothing: subpixel-antialiasedтеперь не действует в Chrome, но в Safari он все еще значительно улучшает ситуацию, НО ТОЛЬКО В RETINA. Без него в Safari на экранах Retina текст будет тонким и безвкусным, тогда как с ним текст имеет надлежащий вес. Но если вы используете это на дисплеях без сетчатки в 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 или backface hidden значительно ухудшает качество рендеринга текста, и лучшее решение, если вы хотите, чтобы текст оставался последовательным, и вы в порядке с более тонким текстом, просто использовать -webkit-font-smoothing: antialiased. Однако явная настройка -webkit-font-smoothing: subpixel-antialiasedдействительно имеет некоторый эффект - текст по-прежнему немного меняется и становится заметно тоньше во время переходов, отображаемых на графическом процессоре, но не таким тонким, как без этого параметра. Так что, похоже, это хотя бы частично препятствует переходу на прямой сглаженный текст.

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

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

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

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

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

-moz-osx-font-smoothing: grayscale;

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

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

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;

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

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

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

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

У меня такая же проблема. Прочтите внимательно:

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

ни одно из вышеперечисленных решений, похоже, не сработало. Однако установка (например,)

#myanimation { -webkit-transform: translateZ(0px); }

на элементе с анимацией .

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

Если это влияет на рендеринг вашего шрифта, то, конечно, это касается только анимированного элемента. Я не вижу разницы в своем Chrome.