title: -webkit-linear-gradient causes 400 (Bad request) error in Safari
body: <p>I'm using Compass to generate linear gradients but I'm getting a strange error indicating that Safari (Version 5.1.2 [6534.52.7]) is trying to load the vendor prefixed line as if it's a URI.  Weird!</p>
  
  <p><strong>The Compass code:</strong>
      body {
          @include background-image(linear-gradient(top, #F7F7F7 0%, #FFFFFF 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #FFFFFF 100%));
      }</p>
  
  <p><strong>Generated CSS:</strong></p>
  
  <pre><code>background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f7f7), color-stop(20%, #ffffff), color-stop(57%, #cccccc), color-stop(60%, #dddddd), color-stop(80%, #f1f1f1), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
  background-image: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
  background-image: -o-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
  background-image: -ms-linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
  background-image: linear-gradient(top, #f7f7f7 0%, #ffffff 20%, #cccccc 57%, #dddddd 60%, #f1f1f1 80%, #ffffff 100%);
  </code></pre>
  
  <p><strong>Error: -webkit-linear-gradient</strong></p>
  
  <pre><code>-webkit-linear-gradient(top,%20rgb(247,%20247,%20247)%200%,%20rgb(255,%20255,%20255)%2020%,%20rgb(204,%20204,%20204)%2057%,%20rgb(221,%20221,%20221)%2060%,%20rgb(241,%20241,%20241)%2080%,%20rgb(255,%20255,%20255)%20100%)
  GET http://localhost:8888/-webkit-linear-gradient(top,%20rgb(247,%20247,%20247)%200%,%20rgb(255,%20255,%20255)%2020%,%20rgb(204,%20204,%20204)%2057%,%20rgb(221,%20221,%20221)%2060%,%20rgb(241,%20241,%20241)%2080%,%20rgb(255,%20255,%20255)%20100%) 400 (Bad Request)
  </code></pre>
  
  <p><strong>Error: -webkit-gradient()</strong></p>
  
  <pre><code>-webkit-gradient(linear,%2050%%200%,%2050%%20100%,%20from(rgb(247,%20247,%20247)),%20color-stop(0.2,%20rgb(255,%20255,%20255)),%20color-stop(0.57,%20rgb(204,%20204,%20204)),%20color-stop(0.6,%20rgb(221,%20221,%20221)),%20color-stop(0.8,%20rgb(241,%20241,%20241)),%20to(rgb(255,%20255,%20255)))
  GET http://localhost:8888/-webkit-gradient(linear,%2050%%200%,%2050%%20100%,%20from(rgb(247,%20247,%20247)),%20color-stop(0.2,%20rgb(255,%20255,%20255)),%20color-stop(0.57,%20rgb(204,%20204,%20204)),%20color-stop(0.6,%20rgb(221,%20221,%20221)),%20color-stop(0.8,%20rgb(241,%20241,%20241)),%20to(rgb(255,%20255,%20255))) 400 (Bad Request)
  </code></pre>
  
  <p>Despite the error, the gradient is rendered correctly.  Also there are numerous other multi-stop linear gradients throughout the page which don't cause the error.  It appears that this is a Safari bug - it occurs only when the gradient is used in the .  Check out some code (see the error live if you're running Safari): </p>
  
  <ol>
  <li><a href="http://jsfiddle.net/YxJZU/5/" rel="nofollow">With error (gradient in Body Tag)</a> </li>
  <li><a href="http://jsfiddle.net/YxJZU/4/" rel="nofollow">No error (same gradient elsewhere)</a></li>
  </ol>
  
  <p>Any ideas/solutions would be greatly appreciated. </p>