Chrome で CSS を拡大縮小するとテキストがぼやけるのはなぜですか?どうすれば修正できますか?

Chrome での CSS スケーリング後のぼやけたテキストの解決

Chrome ユーザーは最近、特に CSS 変換 (scale()) を適用した後にテキストがぼやける経験をしています。以下:

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

}
}

この問題は、Safari などの他の Webkit ブラウザを除き、特に Chrome で発生します。

解決案：

にこの問題を軽減するには、次の 2 つの方法が効果的であることが証明されています。

1.背面の可視性:

背面の可視性を「非表示」に設定すると、オブジェクトの前面のレンダリングに焦点が当てられ、問題が軽減されます:

backface-visibility: hidden;<br> 

2. TranslateZ:

translateZ プロパティを使用するとハードウェア アクセラレーションが強制され、ぼやけに効果的に対処します:

transform: translationZ(0);<br>

オプションで、さらに明確にすることができます。組み込む:

-webkit-font-smoothing:subpixel-antialiased;<br>

さまざまな組み合わせを試すと、レンダリング結果がさらに向上する可能性があります。

以上がChrome で CSS を拡大縮小するとテキストがぼやけるのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。