How is google maps (web app) scaling so smooth on

Question

If you have used the Google Maps web app on your iphone or ipad you know what i am talking about. You can't see my fingers in this screen grab, but this is mid-pinch (if you will) zooming out. The detailed area was the initial map viewing area and the blurry bit outside is the extra map that has come into view mid-pinch.

The pinch-to-zoom function that uses the gesture touch input scales the map currently in view live in a way that is so smooth it looks like magic. We are trying to scale images and reproduce this smooth scaling. Does anyone know how they do it?

We don't know if it's a single img element being scaled. Or maybe all the img elements in their relative grid matrix somehow being all scaled at once (this seems a bit unlikely). Maybe it's lots of canvas elements.. or one big canvas element (which we also doubt after a reasonable amount of testing). Please, any suggestions, ideas or answers (if you're from Google) would be great.

Answer 1

You need to use the hardware accelerated CSS3 transforms. e.g.

• translate3d() instead of translate()
• scale3d() instead of scale()

Only mobile safari currently supports hardware acceleration. It's not known when Google will implement this for Android versions of it's webkit browser.

Answer 2

CSS3 hardware accelerated 3d transitions for webkit