変換後の 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);
  }
}

Chrome で rourkery.com にアクセスすると、メイン テキスト領域の問題が明らかになりますが、他の WebKit ブラウザ (Safari など) には影響がないようです。

ぼやけたテキストの難問に対する解決策

この問題を解決するには、2 つの方法があります。採用:

1. 背面可視性非表示: この手法は、アニメーションをオブジェクトの前面のみに単純化し、デフォルトの前面と背面の状態を排除することで問題を解決します。

   backface-visibility: hidden;

2. TranslateZ: このハックはアニメーションのハードウェア アクセラレーションを有効にし、レンダリングの問題を効果的に解決します。

   transform: translateZ(0);

さらに、一部のユーザーは次のプロパティを追加していることに気づきました有益:

-webkit-font-smoothing: subpixel-antialiased;