Размытие текста в 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;