title: Why does this SVG graphic bog down Webkit only when it's large?
body: <p>I'm having trouble with this graphic in Chrome 16 and Safari 5 Desktop:</p>
  
  <p><a href="http://jsfiddle.net/D7ERH/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/D7ERH/embedded/result/</a></p>
  
  <p><img src="https://i.stack.imgur.com/BzBhl.png" alt="enter image description here"></p>
  
  <p>To reproduce the problem view with your window maximized, then reduce the height of your window and reload.</p>
  
  <p>The framerate suffers tremendously if it's full screen, but if you reduce the window height then webkit seems happy with the graphic. Opera and Firefox have no problem at either size.</p>
  
  <p>The graphic is created with d3.js, but I think it would happen with the same SVG image too as it's just code that generates elements. The cursor movement is pure js.</p>
  
  <p>As a sidenote, I've discovered that mousemovement is smooth if I use <code>translate3d(x, y, 0)</code> instead of top and left, but I'd prefer to use this as a last resort. <code>translate(x, y)</code> is slow too.</p>