[OpenLayers-Dev] Harware accelerated CSS3 animations for iOS

[Gregers Gram Rygg]

Hi,

I've been playing around with latest version of OpenLayers from svn.
Great work on the mobile version :)

Found a little trick to vastly improve the pinch-zoom performance on
iPhone/iPad:

img.olTileImage {
    -webkit-transform: translate3d(0, 0, 0);
}

For some strange reason translate3d is hardware accelerated in Mobile
Safari while the regular translate is not. I first tried to rewrite
the PinchZoom control to use translate3d with 0px in the z-axis, but
that made the pinch zoom to behave differently. Turns out that just
having translate3d(0,0,0) on the tiles combined with a scripted
translate in the PinchZoom control is enough to trigger hardware
rendering.

Not sure how this affects Android and other webkit-browsers. Briefly
tested in Chrome 10, 11, 12, Safari and on a HTC Desire. Have had
Safari on my iPad crash a few times lately, but not sure if it's
related to the translate3d or not.

Thomas Fuchs has written a bit more in-depth research on how to make
smooth animations for iOS:
http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

Is it ok if I include the style rule above in style.css, or shoud we
do some device/feature detection and add a custom css-class to apply
the 3d-hack?

Regards,
Gregers