首頁 >web前端 >css教學 >為什麼我的 Chrome 文字在 CSS 轉換後變得模糊,如何修復?

為什麼我的 Chrome 文字在 CSS 轉換後變得模糊,如何修復?

Barbara Streisand
Barbara Streisand原創
2024-12-13 20:55:47391瀏覽

Why is My Chrome Text Blurry After CSS Transform, and How Can I Fix It?

CSS 轉換後Chrome 中的模糊文字:透過隱藏背面可見性和TranslateZ (0) 解決

使用CSS 轉換縮放文字: scale( )可能會導致最新版本的Google Chrome 出現模糊。這在 http://rourkery.com 的主文字區域中很明顯,轉換後文字出現污跡。

這個問題的解決方案在於使用特定的 CSS 屬性。添加 backface-visibility:hidden 透過僅關注物件的正面來簡化動畫。 translateZ(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 以增強字體渲染。然而,此屬性的必要性各不相同,並且取決於個人喜好。

以上是為什麼我的 Chrome 文字在 CSS 轉換後變得模糊,如何修復?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn