title: Webkit linear gradient stops render incorrectly
body: <p>I have come across a weird problem in webkit browsers (Chrome, Opera).</p>
  
  <p>Test case: <a href="http://sample.easwee.net/gradient-bug/" rel="nofollow noreferrer">http://sample.easwee.net/gradient-bug/</a> (check in Chrome or latest Opera)</p>
  
  <p>I have two columns wrapped by a container. I'm applying a CSS gradient to create backgrounds for this two columns. The color stop is set to <code>66%</code> and columns have the same <code>66%</code> width (using padding to offset the right column).</p>
  
  <p>It renders correctly in Firefox - both column layout and gradient stop point match, but in webkit based browsers the color stop is not matching the column width, although I've used <code>66%</code>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="special-container"&gt;
      &lt;div class="special-container-inner"&gt;
          &lt;div class="special-container-column-L"&gt;
              &lt;img src="http://placehold.it/1070x600" /&gt;
          &lt;/div&gt;
          &lt;div class="special-container-column-R"&gt;
              &lt;img src="http://placehold.it/530x345" /&gt;
              &lt;h3&gt;Test&lt;/h3&gt;
              &lt;p&gt;It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.special-container {}
  .special-container-inner {max-width:1600px;margin:0 auto;
      background: #ff0000;
      background: -moz-linear-gradient(left,  #ff0000 0%, #ff0000 66%, #2989d8 66%, #2989d8 66%, #2989d8 100%, #207cca 100%, #7db9e8 100%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(66%,#ff0000), color-stop(66%,#2989d8), color-stop(66%,#2989d8), color-stop(100%,#2989d8), color-stop(100%,#207cca), color-stop(100%,#7db9e8));
      background: -webkit-linear-gradient(left,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
      background: -o-linear-gradient(left,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
      background: -ms-linear-gradient(left,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
      background: linear-gradient(to right,  #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#7db9e8',GradientType=1 );
  }
  
  .special-container-column-L {width:66%;float:left;text-align:right;}
  .special-container-column-L img {display:inline-block;vertical-align:top;max-width:100%;opacity:0.8;}
  .special-container-column-R {padding-left:66%;}
  .special-container-column-R img {display:inline-block;vertical-align:top;max-width:100%;width:100%;opacity:0.9;}
  .clear {clear:both;}
  </code></pre>
  
  <p><strong>Screenshot:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Aav1r.jpg" alt="enter image description here"></p>
  
  <p>I've used <a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow noreferrer">Colorzilla generator</a> to generate the gradient.</p>
  
  <p><strong>Are there any bug reports or workarounds for this kind of problem?</strong></p>