Why do Safari and Firefox seem to incorrectly rend

Question

Here's the code on CodePen. It looks exactly as I expect in Chrome. Firefox and Safari both look wrong. (I'm on the latest versions of all 3.)

I'm working on a way to use a constant gradient background across multiple inline-block elements. Here's how it's working right now:

1. I have a parent ol whose :before pseudo-element has a gradient background (transparent to opaque color) and a z-index set to display it above the child lis.
2. The lis have the background-color set to the color that looks like what the gradient's transparent value is set to.
3. The li's color is set to transparent and have :before pseudo-elements that display the text that's previously set to transparent and have their z-indices set to display above the ol:before (with background gradient).

The problems I'm seeing in Firefox:

1. The gradient looks like it's got 3 color stops (transparent, grey, transparent) instead of the 2 that are set.
2. The gradient seems as though it's got a multiply blend mode set.

The problems I'm seeing in Safari:

In addition to the same problems in Firefox, it also displays two gradients which seem to have multiply blend modes. One from -webkit-linear-gradient and one from linear-gradient. Solving the issue of the apparent blend mode should take care of this third issue, though.

---

My googling made me aware of background-blend-mode, but setting that to normal (or any other valid value) changed nothing. I think it only works with multiple backgrounds on a single element, but I'm not sure about that. However, that would explain why it doesn't solve my problems.

Answer 1

you need to add this prefix for some browsers which don't take the styles

for mozilla use

-moz-linear-gradient   /* FF3.6+ */

for chrome/safari

-webkit-gradient     /* Chrome,Safari4+ */

-webkit-linear-gradient   /* Chrome10+,Safari5.1+ */

for opera

 -o-linear-gradient    /* Opera 11.10+ */

for ie 10 +

-ms-linear-gradient  /* IE10+ */

i have edited you codepen by adding prefix check it JS Fiddle

Answer 2

The problem was that I used the keyword transparent rather than a transparent version of the color that it was gradating to. The browsers that didn't render the gradient as expected were treating transparent as transparent black. That meant that different gradations between black and my color were present in the gradient.

I'm using SASS so the fix is pretty simple: Just use the rgba() function to convert my hex color to rgba.

background-image: linear-gradient(to top right, rgba($brand-primary, 0), $brand-primary);

I updated the code on CodePen to show the solution.