CodePen

HTML

            
              <div class="wrapper">
    <div>
			<p>Try resizing this page, the border between two colours should be smooth in most browsers, but will jump around in Chrome (not been fixed as of Chrome 35 - June 2014).</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>
	</div>
</div>

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

		
            
          
!

↑ Insert the most common viewport meta tag

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;
}

.anim {
animation: play 20s infinite;
}

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

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................