CSS3 hardware acceleration in WebKit? #81

jasondavies opened this Issue May 17, 2011 · 6 comments


None yet
3 participants

jasondavies commented May 17, 2011

Inspired by Leaflet, I'm wondering if Polymaps could benefit from a hybrid CSS3 + SVG approach. By this I mean using CSS3 transforms for tiles (translations, rotations etc.) and keeping SVG for points and lines etc.

I think all major SVG-supporting browsers support CSS3 too, and Safari on OS X or iOS uses hardware acceleration for animated CSS3 transforms. This would mainly benefit things like animated zoom and smooth panning, particularly for mobile devices.

I thought I'd get some feedback before going off and attempting to implement this!


jasondavies commented May 17, 2011

Wondering if @mbostock has any thoughts on this.


mbostock commented May 17, 2011

Yes, I've been thinking about this quite a bit recently. I'm wondering if this could also be used to solve our anti-aliasing problems, too, but it looks like you still get them if the SVG is positioned in round pixels and then transformed using CSS3; so it's not a solution. :\

We could implement a canvas-based layer for images, and use that to eliminate the most common source of anti-aliasing problems, as well as improve rendering performance. But then we're mixing canvas with SVG, and CSS3 transforms cannot be applied to elements internal to SVG (only to HTML elements). So you couldn't mix a standard Polymaps layer with the canvas accelerated layer; you'd need a separate map container.

I'd also like to see a WebGL-based slippy maps library. It would lack the convenience of SVG, and it wouldn't work in a lot of browsers (such as IE9). Also, the recent security issues regarding WebGL and the subsequent disabling in Chrome & Firefox doesn't help…


jasondavies commented May 17, 2011

Thanks for your thoughts! The canvas-based layer sounds intriguing, even if it has to be in its own container. I've attempted a fix for the antialiasing bug in #65 using simple integer rounding but I haven't tested it for rotated layers and I think it's unlikely to work for those cases.


mbostock commented May 18, 2011

I'd like to take a look at a canvas-based layer this weekend, assuming I can find the time. The idea would be to have a single canvas that has all the tiles rendered into it at native resolution, so there's no antialiasing or resampling necessary—just blitting all the tiles into a big canvas. Then the canvas is wekbit-transform: scale3d etc. to be displayed on-screen using CSS3, so it should be super fast.


jasondavies commented May 19, 2011

Sounds great, looking forward to it :-)

mourner commented May 19, 2011

It's a surprise to me that transformations inside SVG are not hardware-accelerated unlike the usual DOM elements - really hope that iOS developers will fix this in future versions.

By the way, be sure to take a look at http://www.tile5.org/, it's a canvas-based mapping library that's built how @mbostock described - one canvas element with tiles that is being transformed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment