html - FirefoxとChromeは、ボックスシャドウのレンダリングがまったく異なるようです

Question

ChromeとFirefoxの両方でボックスシャドウ効果をテストしていましたが、2つのブラウザ間でレンダリングに大幅な違いがあることに驚きました。特に、Firefoxのレンダリングははるかに暗かった。次に2つの参照画像を示します。

最初の画像はChrome22でレンダリングされ、後者はFirefox 16でレンダリングされ、どちらもMacOS10.8.2で実行されます。2つの画像のレンダリングがこれほど異なる理由がわかりません。これがボックスシャドウ自体で、両方のブラウザで同じです。

box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5);

ライブデモについては、こちらをご覧ください。ボックスにマウスを合わせると、効果が得られます。

レンダリングのこの劇的な違いを修正する方法はありますか？

Answer 1

別のスタイルを使用する Firefox 用のメディア セレクターを作成できます。あなたはそれをいじる必要があります。たとえば、最後のインセット ボックス シャドウのぼかしと広がりを減らし、不透明度を上げました。したがって、.box:hoverの CSSはおそらく次のようになります。

.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5));
}

@-moz-document url-prefix() {
.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 130px -120px rgba(0,0,0,0.9));
}
}

その他のメディア セレクターやその他のブラウザー ハックについては、BrowserHacks.comにアクセスしてください。

Answer 2

これは Chrome の長年のバグで、Chrome 73 (2019 年 3 月) で修正されています。

https://www.chromestatus.com/feature/6569666117894144

歴史的に、Blink のぼかし半径の解釈は、CSS と Canvas2D の両方の仕様と矛盾しています。Blink の影は、予想される領域の約半分をカバーします (リンクされたバグを参照)。この変更により、仕様で義務付けられているように、ガウスぼかしシグマが 1/2 ぼかし半径として計算されるようになりました。Blink の影の実装が、FireFox と Safari に対応するようになりました。

注: このバグは、WebKit から Blink をフォークするよりも古いものです。Safari にはこれまでとは異なるグラフィック エンジンがありました。

https://bugs.chromium.org/p/chromium/issues/detail?id=179006

したがって、この変更によって外観を維持するための正確な式は、
R' = 2 * (0.288675 * R + 0.5) です。

R' (new)     R (previously)
Chrome 73+   Chrome 72 and below
1.5px        1px
2px          2px
3px          3px
3px          4px
4px          5px
4.5px        6px

R' ≈ 0.7 * R       for R = 7px ... 12px
R' ≈ 0.6 * R       for R = 22px ... ∞

Answer 3

これは、Chrome と Firefox が異なる html レンダラーを使用しているためです。劇的な違いはラーガの色によるものだと思いますので、代わりに影を薄くしてみてください。

Answer 4

cssをリセットすると役立つ場合があります：

http://codepen.io/anon/pen/IteyC