[OpenLayers-Dev] Harware accelerated CSS3 animations for iOS

[Eric Lemoine]

On Tuesday, April 12, 2011, Gregers Gram Rygg <gregersrygg at gmail.com> wrote:
> Hi,
>
> Here is a demo with translate3d (click on the raw link to test it on a device)
> https://gist.github.com/913763

I just tested it in my iPhone 3G (old gneration), and pinchzoom does
feel better.


>
> It's a copy of the mobile example (just added <base href=... /> and
> the translate3d hack)
> http://openlayers.org/dev/examples/mobile.html
>
> The css-selector in my first e-mail will only work on layers that use
> OpenLayers.Tile.Image. So guess we have to find a better selector to
> match images in other kind of layers. Some layers have a olLayerDiv
> class, but not all (Google layer has no classes at all). Do we want to
> apply this hack on all layers, or should we apply it in a controlled
> manner?

Right now pinchzoom isn't supported for the commercial layers. The
commercial layers aren't in the "layer container" div, which the div
we scale and translate on pinch. So targetting Tile.Image sounds good
to me at this point.  And for now I think it'd great to document this
trick in the "mobile" section of our narrative doc. Would you provide
a patch for that?

Also, have you tried applying the translate3d hack directly to the
layer container div? (Sorry if it isn't relevant.)

Thanks


>
> Gregers
>
> On Sat, Apr 9, 2011 at 10:45 AM, Gregers Gram Rygg
> <gregersrygg at gmail.com> wrote:
>> 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 f

-- 
Eric Lemoine

Camptocamp France SAS
Savoie Technolac, BP 352
73377 Le Bourget du Lac, Cedex

Tel : 00 33 4 79 44 44 96
Mail : eric.lemoine at camptocamp.com
http://www.camptocamp.com