CSS 変換後に Chrome テキストがぼやけるのはなぜですか?どうすれば修正できますか?

CSS 変換後の Chrome のテキストがぼやける: Backface Visibility Hidden と TranslateZ (0) で解決されました

CSS 変換を使用したテキストの拡大縮小:scale( ）最近のバージョンの Google Chrome では不鮮明になる可能性があります。これは、http://rourkery.com のメイン テキスト領域で明らかであり、変換後にテキストが汚れて表示されます。

この問題の解決策は、特定の CSS プロパティを使用することにあります。 backface-visibility: hidden を追加すると、オブジェクトの前面のみに焦点を当てることでアニメーションが簡素化されます。 translationZ(0) プロパティは、アニメーションをよりスムーズにするためにハードウェア アクセラレーションをシミュレートします。

これらのプロパティを影響を受ける要素に組み込むことで、ぼやけが効果的に除去されます。スニペットの例を次に示します。

@-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;
    transform: translateZ(0);
  }
}

さらに明確にするために、一部の開発者は、フォントのレンダリングを強化するために -webkit-font-smoothing: subpixel-antialiased を含めることもあります。ただし、このプロパティの必要性はさまざまであり、個人の好みによって異なります。

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