[OpenLayers-Dev] Harware accelerated CSS3 animations for iOS

[Noli Sicad]

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);

Thanks.

Noli

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
>