title: linear-gradient not working in Chrome
body: <p>After a good amount of search I am stuck with linear-gradient which works in Firefox but not in Chrome.</p>
  
  <p>I added <code>-webkit-</code> before linear-gradient as described in one reference but still not working I think the problem is in gradient axis </p>
  
  <p>My code</p>
  
  <pre><code>&lt;nav class="top_menu"&gt;
      &lt;ul class="black_high"&gt;
          &lt;li class="first active"&gt; &lt;a href="#"&gt;Home&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;news&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.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%);
  }
  </code></pre>
  
  <p>Creates a fiddle here -- <a href="http://jsfiddle.net/h2zu5xx2/4/">http://jsfiddle.net/h2zu5xx2/4/</a></p>
  
  <p>Any hint/suggestion will do great. Thanks in advance.</p>