WebKit ブラウザで translation3d と Scale を使用するとテキストがぼやけるのはなぜですか?

WebKit ブラウザーでぼやけたテキストに対処する: CSS スケーリングとtranslate3d

Chrome や Safari を含む WebKit ベースのブラウザーでは、多くの場合、特有のエラーが発生します。 CSS でスケールされた要素が、translate3d 変換と組み合わせると大幅にぼやけてしまう問題。開発者は通常、適切なスケーリングを維持しながら変換を適用しようとすると、この課題に遭遇します。

この問題を説明するには、次のコード スニペットを考えてみましょう。

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner {
  -webkit-transform: scale(1.2);
  text-align: center;
}

この例では、「testInner」要素は Y 軸に沿って移動され、1.2 倍に拡大縮小されます。 WebKit ブラウザで表示すると、「testInner」要素内のテキストが目に見えてぼやけて見えます。

問題の理解

WebKit ブラウザは、3D 変換された要素をテクスチャとして処理し、ハードウェアアクセラレーションによりパフォーマンスが向上します。ただし、この処理ではテキストの明瞭さの点で欠点が生じます。

考えられる回避策

残念ながら、この問題に対する直接的な回避策はありません。ぼやけを軽減するには、次のいずれかのアプローチを採用することを検討してください。

• テキスト サイズを大きくし、要素を縮小する: この手法では、テキストを拡大し、要素を縮小して、より高解像度の画像を生成します。 -解像度テクスチャ。これにより、WebKit のレンダリングによって生じる固有の不鮮明さが補正されます。

例:

.testInner {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(1, 0.8);
  text-align: center;
}

• テキスト シャドウの追加: 一方、前の方法では、ぼやけると、アンチエイリアスの品質が低下する可能性があります。これを軽減するには、テキスト シャドウの追加を検討してください。

例:

.testInner {
  -webkit-transform: translate3d(0px, 100px, 0px);
  text-align: center;
  text-shadow: 1px 1px 1px #000;
}

結論

WebKit による 3D 変換されたテキストの処理はそのままです。明確さとスケーラビリティを求める開発者にとっては課題です。提示された回避策は部分的な解決策を提供しますが、望ましい最終結果を考慮して検討することが重要です。

以上がWebKit ブラウザで translation3d と Scale を使用するとテキストがぼやけるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。