Chrome で CSS `transform:scale()` を使用するとテキストがぼやけるのはなぜですか?

CSS 変換後のぼやけたテキストの修正: Chrome のscale()

Chrome ユーザーは、CSS 変換後にテキストがぼやけるという最近の問題を報告しています。変換:scale() アニメーション。この問題は Chrome に限定されており、Safari などの他の Webkit ブラウザには影響しません。

次の CSS アニメーションがぼやけの原因となっています:

@-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);
  }
}

この問題を解決するには、次のいずれかを使用できます。次のプロパティのいずれか:

• 背面可視性:

backface-visibility: hidden;

このプロパティは、オブジェクトの前面にのみ影響を与えるアニメーションを単純化し、背面によって引き起こされるぼやけた効果を排除します。 surface.

• TranslateZ:

transform: translateZ(0);

TranslateZ はアニメーションにハードウェア アクセラレーションを強制します。これにより、ぼやけも修正できます。

さらに、次のプロパティを含めることを選択して、 rendering:

-webkit-font-smoothing: subpixel-antialiased;

これにより、Web フォントの外観がわずかに変更される可能性がありますが、試してみる価値はあるかもしれません。

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