[OpenLayers-Dev] Harware accelerated CSS3 animations for iOS

[Eric Lemoine]

On Tuesday, April 12, 2011, Eric Lemoine <eric.lemoine at camptocamp.com> wrote:
> 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.)

Hmm... and instead of using translate(dx, dy) in the Pinch handler we
could try using translate3d(dx, dy, 0).

On a related note I've been trying to apply -webkit-transform
translate3d to the layer container div for dragging the map. But with
limited success for now—applying translate3d seems to work but, for
some reason, the layer container is positioned back to its initial
position later in the "drag thread".

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