Why does this SVG graphic bog down Webkit only when it's large?

Question

I'm having trouble with this graphic in Chrome 16 and Safari 5 Desktop:

http://jsfiddle.net/D7ERH/embedded/result/

To reproduce the problem view with your window maximized, then reduce the height of your window and reload.

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.

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.

As a sidenote, I've discovered that mousemovement is smooth if I use translate3d(x, y, 0) instead of top and left, but I'd prefer to use this as a last resort. translate(x, y) is slow too.

Answer 1

The simple answer is that it's expensive to redraw. :) Even though the rainbow in the background isn't changing as you move the circle around, the browser may need to redraw those elements as you move other elements (the black circle) on top. Browsers usually have smart repainting, where they detect the dirty region and redraw as few elements as possible; for example, when the window is smaller, the browser doesn't have to redraw elements and parts of elements that are outside the visible area. However, there's no performance guarantee.

You can sometimes trick the browser into caching background elements into a bitmap for faster redraw by applying a CSS 3D transform (-webkit-transform: translate3d). For example, I use that here to rotate a complex scene. Click and drag on the interior of the circle to rotate:

http://mbostock.github.com/d3/talk/20111116/bundle.html

Alternatively, you could render the static background into a Canvas element, and then draw your dynamic SVG or HTML parts on top of it. This forces the browser to cache the background pixels for faster redraw.