linear-gradient not working in Chrome

Question

After a good amount of search I am stuck with linear-gradient which works in Firefox but not in Chrome.

I added -webkit- before linear-gradient as described in one reference but still not working I think the problem is in gradient axis

My code

<nav class="top_menu">
    <ul class="black_high">
        <li class="first active"> <a href="#">Home</a>

        </li>
        <li> <a href="#">news</a>

        </li>
    </ul>
</nav>

.top_menu ul li.active a::after {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: 2px;
    transform:none;

    content: '';
    opacity: 1;
    background: #fff;
    background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%);
}

Creates a fiddle here -- http://jsfiddle.net/h2zu5xx2/4/

Any hint/suggestion will do great. Thanks in advance.

Answer 1

First of all note that -webkit-gradient was intended by Apple and implemented in 2008 in Webkit based web browsers (for instance Safari 4) which has a pretty different syntax than the W3C standard:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

For instance:

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

This is why you couldn't get it to work in your case.

A year later Mozilla introduced -moz-linear-gradient (since Firefox 3.6) which has also a different syntax than the old Webkit version but then it implemented in Webkit under -webkit-linear-gradient:

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)

However the W3C standard version of linear-gradient is quiet different, the formal syntax of linear-gradient() expression is:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

As can be seen in your posted code, the other mistake is the lack of to <side> in the W3C version. Therefore, in your case it should be:

Example Here.

background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);    /* FF3.6+ */
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%);      /* W3C */

Answer 2

Use

background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);

as the similar definition to Mozilla's.