CSS linear gradient transparency mistakenly works only in Safari

Question

Something really strange is happening in Safari. I make a simple gradient overlay to make the text fade out. It works fine in Firefox and Chrome, but not in Safari, which I find weird because Safari and Chrome are based on Webkit.

Safari

Chrome and Firefox

CSS code

.text-fade { background: linear-gradient(to top, white, transparent); bottom: 0; height: 25%; margin: 0; position: absolute; width: 100%; } 

Answer 1

Instead:

 background: linear-gradient(to top, white, transparent); 

Try adjusting the transparency to the rgba color value. For example:

 background: linear-gradient(to top, white, rgba(255,255,255,0)); 

In other words, the rgb value of both colors must match. For example:

 background: linear-gradient(to top, red, rgba(255,0,0,0)); 

As defined by the w3c specification, transparent black transparent (rgba (0,0,0,0)). This means that when you are in the middle of the transition, black should appear.

The color displayed in Safari is correct according to the specifications.