6

I'm finding that Firefox (44.0.2) is rendering the box-shadow CSS very faint / light.

If you compare the difference between Chrome and Firefox it looks a lot lighter in Firefox. https://jsfiddle.net/8db8zr6q/

I was wondering if anyone has come across this problem before and if there is anything that can be done to fix the issue?

Current code:

.shadow {
  height: 400px;
  -webkit-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
  box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
}

Image of issue:

enter image description here

user1788364
  • 1,141
  • 3
  • 19
  • 33
  • Firefox appears to be (incorrectly) clipping the inset shadow based on the dimensions of the box. The spread radius also seems off. – BoltClock Feb 24 '16 at 11:39
  • @BoltClock can you verify that you are saying about firefox with a W3C definition? https://www.w3.org/TR/2010/WD-css3-background-20100612/box-shadow.src.html I think there is very injustice with firefox's behaviours when the most times is chrome making that google wants instead the standard recommendations. Thank you. – Marcos Pérez Gude Feb 24 '16 at 11:41
  • @Marcos Pérez Gude: From https://www.w3.org/TR/css3-background/#shadow-shape (not sure why you're linking to an older draft): "An inner box-shadow casts a shadow as if everything outside the padding edge were opaque." That means no clipping ("knockout") should occur whatsoever. In this example, it means there should not be a second gradient near the bottom edge of the box as shown in Firefox - it should be solid black, as shown in Chrome. – BoltClock Feb 24 '16 at 11:44
  • That's clear now. In this case you're right. Thank you!!! – Marcos Pérez Gude Feb 24 '16 at 11:47
  • It looks as if the issue is down to the inset property. If I remove inset the shadow is darker. Although it doesn't help me much as I need the inset value! I should also say that it works fine in IE and other Firefox versions.. the previous version I was on (43.0.1) rendered the box-shadow fine. – user1788364 Feb 24 '16 at 12:16
  • I'm using FF 47 and I can verify there is no problem and the render is consistent with Chrome's. This was probably a bug. http://i.imgur.com/6gxWDko.jpg – Daniel Cheung Feb 24 '16 at 14:03
  • bit hacky, but could be a workaround for you: https://jsfiddle.net/8db8zr6q/5. I think the bug is with using the negative spread radius with inset – Pete Feb 24 '16 at 14:28
  • I saw this issue in only firefox 44. previous firefox versions works fine – Nasser Ghiasi Feb 24 '16 at 18:10
  • Firefox 45.0.1 compared to Chrome 49.0.2623.87, they seem almost identical. Definitely not lighter in Firefox, like your screenshot. The Firefox shadow does seem to have more of a "blur" (softness) to the shadows. But as far as darkness, they appear the same. – Garconis Mar 18 '16 at 23:38

1 Answers1

0

I had this issue and after long research i found no straight answer so the work around hack is used was to target the -moz-box-shadow prefix by playing around with the values till i got the shade I wanted ,when developing websites i found firefox renders certain things way differently than what you intend