title: Chrome linear gradient bug
body: <p>I have a repeating linear gradient like so: </p>
  
  <pre><code>.placeholder { 
  background: repeating-linear-gradient(to top right, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
  border: 1px solid #000000;
  float: left;
  height: 110px;
  width: 120px;
  }
  </code></pre>
  
  <p>However in chrome, firefox on Mac and opera the appearance is skewed: <img src="https://i.stack.imgur.com/CSj8r.jpg" alt="enter image description here"></p>
  
  <p>It works fine when in a square, but when it becomes a rectangle it becomes jagged - the same doesn't occur in all other browsers.</p>
  
  <p>What causes this? </p>
  
  <p><a href="http://jsfiddle.net/C2KsQ/1/" rel="noreferrer">jsfiddle</a></p>