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

[Gregers Gram Rygg]

Hi,

Here is a demo with translate3d (click on the raw link to test it on a device)
https://gist.github.com/913763

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?

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