web-dev-qa-db-ja.com

CSS移行中にWebkitテキストレンダリングの変更を防ぐ方法

CSSトランジションを使用して、CSSで変換された状態間をトランジションします（基本的には要素のスケールをトランジションします）。要素が遷移しているとき、ページ上の残りのテキスト（Webkit内）は、遷移が完了するまでレンダリングをわずかに変更する傾向があることに気付きます。

フィドル： http://jsfiddle.net/russelluresti/UeNFK/

また、ヘッダーに-webkit-font-smoothing: antialiasedプロパティ/値のペアがあるヘッダーではこれが発生しないことに気付きました。だから、私は不思議に思う、テキストがデフォルトの外観（フォントスムージングの「自動」値）を維持し、トランジション中にレンダリングを変更しないようにする方法があるのだろうか。

「auto」値を使用するようにテキストを明示的に設定しようとしましたが、それは何もしません。また、フォントスムージングを「なし」に設定すると、トランジション中のレンダリングの点滅も防止されることに注意してください。

どんな助けも大歓迎です。

編集1

私はOS Xを使用していることに注意してください。ParallelsでChromeのテストを見ていると、2つの異なる段落の動作が異なるため、Mac専用の問題である可能性があります。

csscss3webkitcss-transitionscss-transforms
80
RussellUresti

私は解決策を見つけたと思う：

-webkit-transform: translateZ(0px);

ハードウェアアクセラレーションを強制する親要素で問題を解決するようです...

EDITコメントしたように、このハックはフォントスムージングを無効にし、フォント、ブラウザ、OSによってはテキストのレンダリングを低下させる可能性があります！

80
Armel Larcier

2018年5月更新

-webkit-font-smoothing: subpixel-antialiasedはChromeでは効果がなくなりましたが、Safariではまだ改善されていますが、RETINAでのみです。 SafariでRetinaスクリーンを使用しない場合、テキストは薄くて不明瞭ですが、テキストがあると適切な重みがあります。しかし、Safariの非Retinaディスプレイでこれを使用すると、（特に軽量の値で）テキストが惨事になります。 media-queryを使用することを強くお勧めします。

@media screen and (-webkit-min-device-pixel-ratio: 2) { body { -webkit-font-smoothing: subpixel-antialiased; } }

-webkit-font-smoothing: subpixel-antialiasedを明示的に設定することは、少なくとも部分的に細いアンチエイリアステキストを避けたい場合、現在の最良のソリューションです。

--tl; dr--

SafariとChromeの両方で、デフォルトのフォントレンダリングがサブピクセルアンチエイリアスを使用する場合、GPUベースのレンダリングを強制するCSSは、translateZを使用したトランスフォームまたはスケールトランジションを使用するための上記の提案のように、SafariとChromeは、サブピクセルでアンチエイリアス処理されたフォントスムージングを自動的に「放棄」し、代わりに、特にSafariでより明るく薄く見えるアンチエイリアス処理されたテキストに切り替えます。

他の応答では、フォントのスムージングをより薄くアンチエイリアス処理されたテキストに設定または強制することで、一定のレンダリングを維持することに焦点を当てています。 translateZまたはbackface hiddenを使用すると、テキストのレンダリングの品質が大幅に低下し、テキストの一貫性を維持し、細いテキストで問題ない場合は-webkit-font-smoothing: antialiasedを使用するのが最善のソリューションです。ただし、-webkit-font-smoothing: subpixel-antialiasedを明示的に設定すると実際に何らかの効果があります。テキストはまだわずかに変化し、GPUでレンダリングされたトランジション中は視覚的にはほぼ薄くなりますが、この設定なしでは薄くなりません。したがって、これは、少なくとも部分的にはアンチエイリアス処理されたテキストへの切り替えを防ぐように見えます。

45
atomless

-webkit-backface-visibility：hidden;を使用して、トランジションによるグラフィックの問題（ちらつき/ ing音/途切れなど）が発生するたびに、ほとんど気づきました。上に作用している要素に問題を解決する傾向があります。

19
Jordan Borth

ハードウェアアクセラレーションによるテキストレンダリングの変更を防ぐには、次のいずれかを実行できます。

  1. すべてのテキストを-webkit-font-smoothing：antialiasedに設定します。これは、テキストが細くなり、サブピクセルアンチエイリアス処理されないことを意味します。

  2. ハードウェアアクセラレーションの影響を受けるテキストをサブピクセルアンチエイリアス（デフォルトのフォントスムージング）にしたい場合は、そのテキストを境界線や無効化せずに入力内に置くと、そのサブピクセルアンチエイリアスが維持されます（少なくともChrome on Mac OS X）。他のプラットフォームではこれをテストしていませんが、サブピクセルアンチエイリアスが重要な場合は、少なくともこのトリックを使用できます。

8
Joran Greef

MacでFirefoxを使用している場合は、次のCSSを使用して問題を修正することをお勧めします。

-moz-osx-font-smoothing: grayscale;

詳細は FirefoxとOperaでのWebfont SmoothingとAntialiasing

5
eleclair

これは私のために働いたものです。それが役に立てば幸い。他のstackoverflowの投稿で見つかりました。

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;
3
Daniel Almeida

上記の解決策（要素の-webkit-transform: translateZ(0px)、およびページの-webkit-font-smoothing: antialiased）に加えて、一部の要素は依然として正しく動作しない可能性があります。私にとっては、入力要素のプレースホルダーテキストでした。これには、position:relativeを使用します

1
WraithKenny

レンダリングの変更を防ぐには、font-smoothing: antialiased（またはnone）を設定する必要があります。

ブラウザがサブピクセルフォントレンダリングを無効にしているのは、ハードウェアアクセラレーションの副作用です。レンダリング対象の背景が常に変化している場合、各フレームをすべての背景レイヤーに対してチェックする必要があるため、テキストを個別のレイヤーにレンダリングすることはできません。これにより、パフォーマンスが大幅に低下する可能性があります。

Appleは、 theirown サイトでサブピクセルフォントスムージングを無効にすることがよくあります。

1
Henrik