CSS 変換後、Chrome でテキストがぼやけるのはなぜですか?

CSS 変換後に Chrome でテキストがぼやける: 修正ガイド

最近の Chrome アップデートで、テキストがぼやけるという特有の問題が発生しました。変換を適用した後:scale() プロパティ。支援を求めている開発者は、この問題について次の投稿で説明しました:

問題の説明:

I'm using @-webkit-keyframes with a scale transform to animate text on my website. However, it's becoming blurry after the scale animation. This wasn't an issue before and doesn't occur in other Webkit browsers like Safari.

解決策:

推奨される解決策には、次の CSS プロパティの 1 つまたは両方を利用してレンダリングの問題を解決することが含まれます。 issue:

1. Backface Visibility Hidden: このプロパティは、アニメーションをオブジェクトの前面に制限し、前面と背面の両方のデフォルトのアニメーションを排除します。

backface-visibility: hidden;

2. TranslateZ: これは、ハードウェア アクセラレーションを有効にする回避策です。

transform: translateZ(0);

さらに、一部のユーザーは次のプロパティを追加することで成功したと報告しています:

-webkit-font-smoothing: subpixel-antialiased;

このメソッドは Web フォントのレンダリングを変更する可能性がありますが、価値があります。最適な結果を得るために実験中です。これらの解決策のいずれかを適用するか、それらを組み合わせて適用すると、Chrome での CSS 変換後のぼやけたテキストの問題が修正されるはずです。

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