CSS 遷移中の Webkit テキスト レンダリングの不一致を解決する

CSS 遷移中、特に要素をスケーリングするときに、Webkit 内でテキスト レンダリングの不一致が発生する可能性があります。ブラウザ。この問題は、ブラウザがレンダリング パフォーマンスを最適化しようとすることが原因で発生します。

1 つの解決策は、次のプロパティを追加して、遷移要素の親要素にハードウェア アクセラレーションを強制することです:

-webkit-transform: translateZ(0px);

これにより、要素が GPU 上でレンダリングされるようになり、レンダリングの不一致が解決されます。ただし、このソリューションには潜在的な欠点があることに注意することが重要です。

• ハードウェア アクセラレーションによりフォント スムージングが無効になり、特定のシナリオではテキスト レンダリングの品質が低下する可能性があります。
• このソリューションの有効性はさまざまである可​​能性があります。使用されているフォント、ブラウザのバージョン、オペレーティング システムなどの要因によって異なります。