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

Gregers Gram Rygg gregersrygg at gmail.com
Tue Apr 12 03:19:43 EDT 2011


Here is a demo with translate3d (click on the raw link to test it on a device)

It's a copy of the mobile example (just added <base href=... /> and
the translate3d hack)

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


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

More information about the Dev mailing list