web-dev-qa-db-ja.com

スクロール中に一部のパターンが奇妙な色でちらつくのはなぜですか?

この画像(ソース: Guardian Business )は、一部のブラウザーでスクロールすると奇妙な動作を示します。 Safariの100%(OS XではLCDディスプレイ))で、スクロール時に赤く点滅します;一部のズームレベルでは モアレのような パターンを示します。

Stock market value

ちらつきは気を散らすものであり、ドットパターンの代わりにベタ塗りを使用することで明らかに回避できます。しかし、なぜそれが正確に発生し、ちらつきを回避しながら、どのようにして同様のパターンを示すことができるでしょうか?

7
Dan

これは、古典的な新聞用紙スタイルの2色の正方形の通常のマトリックスでシェーディングが行われているためです。 2つの問題が発生します。

  1. 小規模では、行列の次元は、利用可能な画面pixに均等に分割されません。レンダリングアルゴリズムは不完全なものを最善の方法で試しますが、不均一なシェーディングが発生します(暗い境界線へのグラデーションを含む)。これがまさにここにあるものです(さまざまなスケールにズームして拡大鏡で調べることができるため)。スクロールすると、シェーディンググリッドがピクセルグリッド上を移動するにつれて、シェーディングの分割が変化し、フィットを解決する数式が異なる答えを出します(実際には、画面の応答時間とは関係ありません。これは、古典的なストロボスコープ効果です)。ピクセルグリッド内のシェーディンググリッドの描画に検出可能な問題がない点までズームアウトすると、効果は停止します。
  2. しかし、その時点で別の問題が発生します。 ヘルマングリッドの錯覚 -これは興味深いですが、おそらくユーザーに焦点を当てたいものではありません;- )

通常のパターンと小さなパレットでシェーディングを回避する場合、問題はありません。

ちらつきの赤に関しては、画面に表示されないのでよくわかりません。その側面は、グリッドのシェーディングに対処しようとするディスプレイまたはグラフィックスカード/ドライバーの技術的な特異性かもしれません。

8
tardate

LCDのピクセルがオン(黒)とオフ(白)の間で遷移するのにゼロ以外の時間がかかるためです。変化が大きいほど、時間がかかります。基本的に、効果はこれによるものですが、パターンの均一性と細かさにより明らかになります。

パターンを拡大して白/黒の領域を大きくすると、効果が目立ちにくくなります。

6
bradley.ayers