Firefox and Chrome seem to render box-shadow quite differently

Question

I was testing a box-shadow effect in both Chrome and Firefox and I was surprised to see a drastic difference in rendering between the two browsers. Notably, Firefox\'s rende

Answer 1

You are using multiple box shadows so try doing this (also removes alpha from box shadows I have done this below for you to try)

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

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

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

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

If there is still a problem dou you have any fiddle or link for that so I can check properly

Answer 2

You can create a media selector for Firefox which will be using a different style. You will have to play around with it. For example, I reduced the blur, the spread and turned up the opacity of the last inset box-shadow. So the CSS for the .box:hover should probably look something like this:

.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));
}
}

For more media selectors and other browser hacks you can visit BrowserHacks.com

Answer 3

May be resetting css will help :

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

Answer 4

This is a long standing bug in Chrome which is fixed for Chrome 73 (coming March 2019).

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

Historically, Blink's blur-radius interpretation has been at odds with both the CSS and Canvas2D specs: Blink shadows cover about half the expected area (see linked bug). With this change Gaussian blur sigma is now computed as 1/2 blur-radius, as mandated by spec. Blink's shadow implementation now matches FireFox and Safari.

Note: This bug is older than forking Blink from WebKit. Safari ever had a different graphics engine.

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

So the exact formula to preserve appearance through this change is
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 5

That's because Chrome and Firefox use different html renderers. I think that the drastic difference is caused by the raga color, try fading the shadow instead.