Issue with linear-gradient on when using HSL color definition

Question

I am targeting the latest version of Chrome, I suppose linear-gradient is compatible even without vendor prefix.

I have notice that when using HSL colors in the gradient definition prefix must be added otherwise it does no render at all.

I would like to know:

• Is this a special case so vendor prefix is a compulsory or it is a browser bug?

#test {
  width: 250px;
  height: 250px;
  /*works */
  background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
  /* does no work
  background: linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
*/
}

<div id="test"></div>

Answer 1

It is not a bug, you are just using the outdated gradient syntax with the standard property. The old one didn't have the to keyword and which was later added. The MDN page has some history about this change.

Quoting the W3C Spec: (note the keyword that I've emphasised)

The linear gradient syntax is:

<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ )

<side-or-corner> = [left | right] || [top | bottom]

The old syntax worked by specifying the origin point of the gradient whereas the new syntax works by specifying the destination point, so a value like top should be replaced with to bottom, left with to right, top left with to bottom right etc.

The following snippet which makes the change mentioned above works for me in Chrome v43 and so should work for you in the latest Chrome too.

#test {
  width: 250px;
  height: 250px;
  background: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
}

<div id="test"></div>