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

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

Fiddle: http://jsfiddle.net/russelluresti/UeNFK/

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

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

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

Изменить 1

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

Ответ 1

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

-webkit-transform: translateZ(0px);

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

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

Ответ 2

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

- TL; DR -

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

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

ОБНОВЛЕНИЕ август 2017

-webkit-font-smoothing: subpixel-antialiased теперь не действует в Chrome и ухудшает текст в Safari. Посоветуйте избегать.

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

-moz-osx-font-smoothing: grayscale;

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

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

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

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

для элемента, который имеет анимацию.

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

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