CODEWITHSUNDEEP
cssfirefoxlinear-gradients
Sebastian Häni
Sebastian Häni

Reputation: 566

Firefox multiple gradient backgrounds bug

My goal is to give some divs a top and left inner shadow. To do that, I have given the divs two background-images with linear-gradient:

background-image: linear-gradient(90deg, #263B4B  0, transparent 50px),
                  linear-gradient(180deg, #263B4B  0, transparent 50px);

This looks fine in Chrome 39 and IE 11, but not in Firefox 32. Firefox doesn't display it correctly.

At first, I had the following CSS, which worked fine, but since there are many divs with this shadow, the page rendering was extremly slow to unusable, especially on mobile. So I don't want to use box-shadow.

box-shadow: 18px 31px 95px 0px rgba(0, 0, 0, .2) inset;

How do I get this to work on Firefox without using an image file?

JSFiddle: http://jsfiddle.net/eLkhwoqg/2

Upvotes: 0

Views: 154

Answers (1)

BoltClock
BoltClock

Reputation: 723518

Firefox's interpolation between other color stops and the transparent keyword isn't quite right. Because transparent corresponds to rgba(0, 0, 0, 0), Firefox is using that value to calculate the gradient, except it is doing so in non-premultiplied RGBA space, which results in the gradient transitioning from your given color to black. We know this behavior is in fact incorrect, because the spec says so.

Fortunately, the workaround is easy: simply use a zero alpha version of the same color you're using and Firefox will interpolate the gradient correctly:

background-image: linear-gradient(90deg, #263B4B  0, rgba(38, 59, 75, 0) 50px),
                  linear-gradient(180deg, #263B4B  0, rgba(38, 59, 75, 0) 50px);

Once this is fixed, you will be able to use the transparent keyword going forward.

Upvotes: 1

Related Questions