Chromeのグラデーションバンディング

グラデーションに画像を使用しないように線形グラデーションのCSSを使用しようとしましたが、残念ながら、縞模様が表示されているChromeではレンダリングが不十分です。

この問題を説明するコードペンの例を作成しました。

http://codepen.io/chrism/pen/1

別のWebkitベースのブラウザーであるSafariで完全にレンダリングされるため、これは奇妙です。

CSSコードはコンパス画像に由来するので、私のCSSの問題だとは思わないでください

Chromeの問題トラッカーでこのチケットを見つけました。このチケットはこの問題に関連していると思います。

http://code.google.com/p/chromium/issues/detail?id=41756

誰かがこれを回避するために画像を使用しない回避策を持っているかどうか疑問に思っていましたか？

ありがとう！

— クリス
ソース

いいえ。回避策はありません。これはChromeのレンダリングエンジンです。画像を使用したり、Googleがレンダリングエンジンを改善するのを待ったりすることはできません。

— スコット

あなたが見ている違いはディザリングです。Safariはグラデーションをディザリングしますが、Chromeはしません。私はディザリングを有効または無効にする方法があるとは思いません。

ディザは意図的に適用されたノイズの形式であり、量子化エラーをランダム化して、画像のカラーバンディングなどの大規模なパターンを防止します。

http://en.wikipedia.org/wiki/Dither

残念ながら、これは画像を使用する必要があることを意味します。あなたがいる場合か、勾配のため、繰り返し画像を使用することを決定、あなたが仕事にディザリングのための十分な幅や高さを残すことを確認してください。通常、ディザリングは繰り返し表示されないようにするために約10〜20ピクセルが必要です。

— マークエドワーズ
ソース

こんにちはマーク、答えてくれてありがとう。はい、スムーズなグラデーションがディザリングによるものであることを理解しています。CSSまたはJavaScriptで何らかの方法でクロムをディザグラデーションに「強制」する方法を誰かが知っていることを願っていました。代わりに画像を使用しますが、（さまざまな理由で）あまり期待していませんでした。アドバイスありがとうございます。繰り返しのポッドキャストをお楽しみください。

— Chrisが

ええ、-webkit-gradient-dither：on; 存在した。そしてありがとう：D

— マークエドワーズ

同じではなく、おそらくはるかに悪いパフォーマンスですが、CSSで描画されたグラデーションの上にある微妙なノイズテクスチャはどうでしょうか？1つの小さめのノイズテクスチャは、おそらくすべてのグラデーションに使用できます。ディザリングされたグラデーションと同じではありませんが、ディザリングなしの場合よりも良いのではないでしょうか？

— マークエドワーズ

それは私が試した最初のことだったのでおかしいです-透明なノイズの背景画像を上に追加します...それは確かに助けましたが、かなり重いノイズでも十分にバンディングを不明瞭にするのに十分ではありません（とにかく私が欲しい効果）。これを説明するために画像を投稿したかったのですが、許可する前に、もう少しポイントが必要です。ご提案いただきありがとうございます。画像を使用する前にすべての手段を検討したことを嬉しく思います:)

— Chris

ああ。まあ、それはあなたがそれを試してみて素晴らしいです。私は質問に投票したので、うまくいけば、画像を投稿できるようになるためのポイントがさらに増えます。

— マークエドワーズ

グラデーションを含む要素をGPUでを使用transform:translateZ(0)してレンダリングすると、スムーズにレンダリングされますが、完璧ではありませんが、スムーズにレンダリングされます。

— シルカン
ソース