iOS (iPad) map animated dragging tile refresh bug

[elemoine]

I noticed that when you drag the map in an iPad, when the window has to get new tiles the ios browser, most times it refreshes the whole screen and it flickers a lot. It is noticeable even in an iPad 2 with iOS 5.

I also noticed that it happens when browsing your examples page.

I already digged into the Open Layers classes and tried to change some parts to make sure that the images and divs have the right size, but none of my efforts produced any effect.

[elemoine]

What if you disable tile animation entirely with:

.olTileImage {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: all 0 none;
    transition: none;
}

?

[ajscarvalho]

Fixed!
Thanks!
What animation was taking place? In the desktop version I don't see any animation taking place! Can't notice any difference at all

[elemoine]

Fixed for you, not for me :-)

[elemoine]

Do you use any toolkit like Sencha Touch in addition to OpenLayers?

[ajscarvalho]

No, I've written a lot of code around OpenLayers to deal with SVG and canvas polylines as well as the POI markers, and I deal natively with the touch and gesture events. I also stripped some unnecessary code to have a lighter js file.

[elemoine]

What specific OpenLayers example(s) could I use to easily reproduce the problem?

[ajscarvalho]

hummm it seems to have been fixed for some ipads.... others still show the issue. I tested on an ipad 3 and on an iphone 4 and the issue happened.
it's better viewed on a slow terminal and on the full screen development example.

[ajscarvalho]

you can also observe it better when you do a big scroll and it has to load lots of tiles (rows and columns)

[elemoine]

http://www.openlayers.org/dev/examples/mobile.html works fine on my iPhone 4S. I'll try in an iPad 2.

[ajscarvalho]

hum... your example in particular has the flicker effect even in my chrome browser. What happens is that it starts loading some tiles, then seems to abort, resets a position, clears the screen and restarts loading the tiles, instead of loading just the missing tiles. It happens when you do a "touch start - drag - release - animated innercia effect - stop"

[ajscarvalho]

and it doesn't happen every time... do long diagonal drags.

[elemoine]

In mobile.html I do see flashes in an iPad 2, but not in Chrome 19.

[elemoine]

I'm now seeing the blinking in the iPhone 4S. It's not as striking as in the iPad because there are only four tiles on iPhone to cover the viewport.

It is certain that the issue is related to the fade transition of tiles, but I don't know how to fix it.

[ajscarvalho]

I don't think it's related to animation anymore... my tiles just pop up. I'm thinking that maybe the tile refresh algorithm starts to add rows and columns and loading images and somehow a full refresh is triggered (like when you pan to an offscreen position - and it just starts from scratch). Can this be the problem?

[elemoine]

I'm no longer sure we're looking at the same issue. In my case I see the tiles blinking when panning or zooming. This issue is related to tile animation, for sure. You're talking about a different issue, aren't you?

[ajscarvalho]

I'm not really sure,
what I can say is that in my map version, i disabled tile loading in the following situations:

• while dragging
• while doing an inertia pan animation

The tiles will only be loaded, when the map stops moving.
I also disabled all kinds of extra tile cache. I once had 130% the terminal width and height to allow for some caching, but it was decided to remove it, to increase performance and minimize data transfers.

All that together must have acted in a way that increased the occurrence of those blinks.

[elemoine]

@ajscarvalho,

Does adding the following CSS rule fix it for you

/* enable 3d acceleration when operating on tiles, this is
   known to yield better performance on IOS Safari.
   http://osgeo-org.1803224.n2.nabble.com/Harware-accelerated-CSS3-animations-for-iOS-td6255560.html
*/
@media (-webkit-transform-3d) {
img.olTileImage {
    -webkit-transform: translate3d(0, 0, 0);
}
}

?

It fixes the tile blinking issue for me on iPhone 4S and iPad 2 (iOS 5).

[elemoine]

My mobilecss branch includes changes I'd like to make for 2.12: elemoine/openlayers@openlayers:2.12...mobilecss

Thanks a lot @tonio and @ajscarvalho for the collaboration on this!

[elemoine]

I've attached my branch's commits to this issue. @ajscarvalho I'm hoping my branch works for you, so I can merge it into 2.12 and release 2.12 RC7.

[ajscarvalho]

i'll only be able to test it monday, I'll come back to you on this issue by
then

[adv-isu]

Can't speak for ajscarvalho, but I have an OpenLayers webapp targeting the iPad in which I've been seeing the full-screen flicker, and this CSS tweak seems to fix it for me. I've been testing with an iPad 2, iOS 4.2

[elemoine]

@adv-isu thanks a lot for your feedback. I'm very interested to know if this fix works for people.

[ajscarvalho]

Just adding that rule, doesn't work for me. It has a strange effect that I really don't know how to describe...
It seems that the map tiles only get drawn from (or to) a certain point in the screen.
A video may be the best documentation.
First, I'll try to merge every css rule you have there with my css to check for eventual changes.

[elemoine]

@ajscarvalho do you mean that the new commits make things worse for you?

[ajscarvalho]

Yup, but I'm merging with this dev version (js), and things seem to have become stabler. Unfortunately I cannot just pull everything, and I'm merging and trying to check if it broke, where, etc...

[ajscarvalho]

okay after the merge, the ipad shown no more flicker issues... But I do get them in the sony tablet (slow, android 4)
I'll also test the galaxy tab today.

[ajscarvalho]

may it be related to the fact that OpenLayers.Animation.isNative is false on the sony tablet?

[elemoine]

@ajscarvalho OpenLayers.Animation.isNative is also false on iOS, as the browser does not support requestAnimationFrame.

[ajscarvalho]

http://caniuse.com/#search=requestAnimationFrame
ok, I thought they already implemented it as I have created some HTML5 games that work really well on iPhone, but I guess I was wrong

[ajscarvalho]

also happens in galaxy tab 2 (android 4) and after I have merged with you (might not be your fault) it is now restarting the browser

[elemoine]

You don't need to merge anything to test someone else's branch. Just add a remote to the developer's GitHub repo and check out his branch:

$ git remote add elemoine https://github.com/elemoine/openlayers.git
$ git fetch elemoine
$ git checkout elemoine/mobilecss

Hope this helps.

[ajscarvalho]

Yup but I have made some small changes directly in your classes and I tested your code with and without my changes

[elemoine]

Ok, I'm going to merge this pull request's commits, as they do bring substantial improvements on iOS 4 and 5. Further investigation on Android is very welcome though.