«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Почему мой текст размыт в Chrome после использования Transform: Scale()?

Почему мой текст размыт в Chrome после использования Transform: Scale()?

Опубликовано 24 декабря 2024 г.
Просматривать:949

Why is My Text Blurry in Chrome After Using `transform: scale()`?

Размытие текста в Chrome после преобразования: Scale()

В последних обновлениях Chrome возникла странная проблема, при которой текст отображался с использованием преобразования CSS : свойство Scale() выглядит размытым. Эта проблема наблюдалась при использовании этого конкретного кода:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Посещение rourkery.com в Chrome обнаруживает проблему в основной текстовой области, в то время как в других браузерах WebKit (например, Safari) проблема не затрагивается.

Решение проблемы с размытым текстом

Чтобы решить эту проблему, можно использовать два подхода. используется:

  1. Видимость обратной стороны скрыта: Этот метод решает проблему, упрощая анимацию до передней части объекта, устраняя состояния передней и задней части по умолчанию.

    backface-visibility: hidden;
  2. TranslateZ: Этот хак активирует аппаратное ускорение анимации, эффективно решая проблему рендеринга.

    transform: translateZ(0);

Кроме того, некоторые пользователи обнаруживают добавление следующего свойства полезно:

-webkit-font-smoothing: subpixel-antialiased;
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3