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中文網其他相關文章!