[OpenLayers-Dev] Harware accelerated CSS3 animations for iOS

Noli Sicad nsicad at gmail.com
Fri Apr 8 19:59:13 EDT 2011

Which mobile openlayers example uses olTileImage?

How can we use this patch,

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

in one of the examples?

Otherwise, I like to see new mobile example ( - sandbox) that use this
feature -  -webkit-transform: translate3d(0, 0, 0);



On 4/9/11, Tim Schaub <tschaub at opengeo.org> wrote:
> 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.
> _______________________________________________
> Dev mailing list
> Dev at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-dev

More information about the Dev mailing list