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

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

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

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

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

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

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

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

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

 -webkit-transform: translateZ(0px); 

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

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

ОБНОВЛЕНИЕ В мае 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 действительно имеет некоторый эффект – текст все еще немного меняется и почти заметно становится тоньше во время переходов, отображаемых на графическом процессоре, но не такой тонкий, как без этого. Таким образом, похоже, что это, по крайней мере, частично предотвращает переключение на прямой антиазиатский текст.

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

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

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

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

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

 -moz-osx-font-smoothing: grayscale; 

Подробнее об этом в Webfont Smoothing and Antialiasing в 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); } 

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

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

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

  • CSS Что такое -moz- и -webkit-?
  • Safari / Chrome (Webkit) - Не удается скрыть вертикальную полосу прокрутки iframe
  • Предотrotation скрытия полос прокрутки для пользователей трекпада MacOS в WebKit / Blink
  • Есть ли встроенный компонент Webkit для разработки Windows / C #?
  • Как удалить выделение границы в текстовом элементе ввода
  • Webkit CSS для управления полем вокруг цвета во вводе ?
  • есть ли альтернатива DOMAttrModified, которая будет работать в webkit
  • Размытый текст после использования CSS transform: scale (); в Chrome
  • Поведение видеоввода HTML5 на iPhone и iPod в веб-приложениях Safari
  • : активный псевдоclass не работает в мобильном safari
  • вводить CSS на сайт с webview в android
  • Interesting Posts
    Давайте будем гением компьютера.