[OpenLayers-Dev] Re: Harware accelerated CSS3 animations for iOS

[Gregers Gram Rygg]

I think we use WFS-layers, but not 100% sure. Up in the mountains only
with my ipad, but can try to get a demo out on monday.

The idea is to use a css selector that apply the translate3d on each
image/tile in your map.

Gregers

On Saturday, April 9, 2011, Noli Sicad <nsicad at gmail.com> wrote:
> 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
>>
> _______________________________________________
> Dev mailing list
> Dev at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-dev
>