「transform:scale()」を使用した後、Chrome でテキストがぼやけるのはなぜですか?

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

以上が「transform:scale()」を使用した後、Chrome でテキストがぼやけるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。