CodePen

HTML

            
              <div class="wrapper">
    <div>
			<p>Try resizing this page, the border between two colours should be smooth in most browsers with the dotted line and colour interface matching up. In Chrome the position of the colour change is incorrect and jumps around</p>
      <p>According to <a href="http://code.google.com/p/chromium/issues/detail?id=233879">this bug</a> it is due to Chrome splitting the gradient into 256 sections, and so getting rounding down errors.</p>
      <p>Discovered via <a href="http://stackoverflow.com/questions/23627292/">this Stack Overflow question</a></p>
      <p>Update: Chrome 43 the jumping has been reduced ... but compare this page in Chrome and IE / Firefox to see the difference in rendering.</p>
	</div>
</div>

<div class="wrapper anim"><div>Animated in browsers that support it.</div></div>

<div class="wrapper anim inverted"><div>Animated in browsers that support it.</div></div>

		
            
          
!

CSS

            
              * { box-sizing: border-box; }

.wrapper {
  background: #f00;
  background: linear-gradient(to right, #ccc 66%, #2989d8 66%);
}

.wrapper div {
  margin: 0 0 6px;
  padding: 6px 12px;
  width:66%;
  border-right: 1px dotted white;
}

.inverted {background: linear-gradient(to right, #2989d8 66%, #ccc 66%);}

.anim {
animation: play 20s infinite;
}

@keyframes play {
   from { width: 500px; }
     to { width: 120%; }
}

            
          
!

JS

            
              
            
          
!
999px
Loading ..................