[OpenLayers-Dev] Harware accelerated CSS3 animations for iOS

[Tim Schaub]

On 4/8/11 4:52 PM, Gregers Gram Rygg wrote:
> 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);
> }
>

Thanks for passing on the tip.  I don't see a noticeable difference in 
the iOS simulator, but I'll try on a real device later.

I'm thinking that due to the "new and buggy" nature of the hardware 
accelerated transforms and our proximity to a 2.11 release, it doesn't 
make sense to drop this in at this point.

It is certainly something we can suggest people use.  And if we find 
that it brings more benefits than drawbacks, I think it makes sense to 
include in the style.css we ship.

Interested to hear how it works for others.

Tim

> 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
> _______________________________________________
> Dev mailing list
> Dev at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-dev


-- 
Tim Schaub
OpenGeo - http://opengeo.org
Expert service straight from the developers.