title: Repeating linear background displayed incorrectly
body: <p>I recently discovered a strange displaying issue in Chrome while trying to place a repeating gradient on a table row: </p>
  
  <p><strong><a href="http://jsfiddle.net/4nb9B/2/" rel="nofollow noreferrer">see the Demo</a></strong></p>
  
  <pre><code>&lt;table id="one"&gt;
      &lt;tr&gt;&lt;td&gt;123&lt;/td&gt;&lt;td&gt;asd&lt;/td&gt;&lt;td&gt;brgfbb&lt;/td&gt;&lt;td&gt;sdf&lt;/td&gt;&lt;td&gt;bgfb&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  #one tr{
     background-image: repeating-linear-gradient(135deg, 
                       #bada55, #bada55 5px, 
                       transparent 5px, transparent 10px);
  }
  </code></pre>
  
  <p>Placing such a gradient on the <code>td</code> element of course won't work. However,
  when placing the gradient on the <code>tr</code> the gradient strangely is disrupted as if it was placed on the <code>td</code>s. The breaks are exactly where the table cells touch. When placing the gradient on the table instead, the stripes have irregular size.</p>
  
  <p>Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/7oO5P.png" alt="Chrome linear gradient bug"></p>
  
  <p>In Firefox everything looks nice:</p>
  
  <p><img src="https://i.stack.imgur.com/3Mzqm.png" alt="Firefox gradient"></p>
  
  <p>P.S. IE10 has the same problems with the gradient on the <code>tr</code>, directly on the table element everything looks fine.</p>
  
  <p>Do you know any workarounds for this issue?</p>