13

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 rendering was much darker. Here are two reference images:

Chrome Firefox

The first image is rendered in Chrome 22, and the latter in Firefox 16, both running under Mac OS 10.8.2. I have no idea why the two images are rendering so differently. Here's the box shadow itself, same for both browsers:

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

For a live demo, you can see here. Mouse over the box to get the effect.

Is there any way I can fix this drastic difference in rendering?

2
  • 2
    This has been an issue for quite a while. I still don't know what causes it: stackoverflow.com/questions/11167516/…
    – BoltClock
    Oct 21 '12 at 18:03
  • My guess is, that this is a component which the browsercompanies design. For example, Alert popups look very different in different browsers. If you want to have same looking, I think you have to draw and code it yourself.
    – Allan
    Feb 25 '14 at 22:53
4

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

4
  • I suppose that using the prefixes of each browser will be as sufficient so there is no reason to use a hack for this.
    – xpy
    Dec 17 '13 at 8:28
  • @xpy Can you give me an example, because I cannot understand you?
    – thexpand
    Dec 18 '13 at 14:18
  • 2
    I made a fiddle of the example: jsfiddle.net/pavloschris/hkJkG even if there is an unprefixed version of the attribute, chrome uses the prefixed one, the other browsers will use the unprefixed.
    – xpy
    Dec 18 '13 at 16:25
  • Correct. However, newer versions make use of box-shadow, instead of -webkit-box-shadow if you write box-shadow after the vendor prefixed property.
    – thexpand
    Jul 25 '15 at 8:28
3

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 ... ∞
2
  • As the comment above points out your answer is basically only two links. Would you mind to quote the most relevant part(s) about the change so future visitors can see the important information even faster?
    – Filnor
    Jan 9 '19 at 8:44
  • Added some quotes to the provided links.
    – j.j.
    Mar 13 '19 at 0:21
1

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.

1

May be resetting css will help :

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

1
  • 1
    Please, try to read this stackoverflow.com/help/deleted-answers, to get more understanding how to not answer. Namely: "Answers that do not fundamentally answer the question": barely more than a link to an external site Dec 11 '13 at 8:20
0

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

1
  • Don't use prefixes for box-shadow. It's implemented unprefixed in any browser since 2011 and Chrome's buggy rendering difference is fixed in Chrome 73.
    – j.j.
    Jan 8 '19 at 2:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.