title: SVG animation leaves banding artifacts in Chrome Version 23.0.1271.95
body: <p>While testing an SVG animation I've run into a rendering problem in Chrome Version 23.0.1271.95.</p>
  
  <p>The animated triangles seem to leave some black vertical banding.
  This goes away if you tab away from the page and back or if you otherwise force a redraw.</p>
  
  <p>You can find the animation test here:
  <a href="http://bit.ly/HexaGridTest" rel="nofollow noreferrer">http://bit.ly/HexaGridTest</a></p>
  
  <p>And here's a screenshot:
  <img src="https://i.stack.imgur.com/pviXn.png" alt="enter image description here"></p>
  
  <p>Looking at other posts on similar issues it seems that the only way to eliminate this GPU-acceleration-related problem is to force a redraw at the end of the animation.</p>
  
  <p>Someone suggested adding <code>-webkit-backface-visibility: hidden</code> to the SVG, but this didn't solve the issue for me.</p>
  
  <p>Is there any alternative? Any flag or CSS property I could set to avoid the artifacts? </p>