Map freezes on Android 4.1.1 Samsung Galaxy Note2

[florianf]

When pinch-to-zoom the map freezes with the enlarged tiles shown, no new tiles are loaded and the map can't be moved after. Zooming via the buttons with activated animations also freezes the map. This is reproducable for versions 0.4.4 and 0.5.

I think the problem is somehow related to the css3 animations. Disabling all animations and disabling pinch-to-zoom by manually setting the L.Browser.android23=true, fixes the freeze.

First thought was, that the transitionEnd standard event isn't fired correctly, but the problem persists when using the webkit specific events (browser seems to support unprefixed events, but in our code transitionEnd wasn't fired, but webkitTransitionEnd was).

Interestingly everything works fine in stock Android 4.0.3 / CyanogenMod on a Samsung Galaxy S phone.

[mourner]

Please try setting L_DISABLE_3D = true before including Leaflet. http://leafletjs.com/reference.html#global

[Mathbl]

Yes! If you want to make sure leaflet works well with most of the Android versions, your best bet is to set L_DISABLE_3D = true.

Sadly, it's gonna make the map less smooth and you lose some cool animations, but if you don't disable 3D, you'll encounter many strange random problems on different Android versions.

[danzel]

If this fixes it in this case... Maybe we just disable 3d on android native browser (AFAIK it is fine in chrome browser on android devices, right?)

[Mathbl]

I'm not sure @danzel, I was talking about my case. I'm developing an Android app with Leaflet inside webviews, and if I don't disable 3D, it's really inconsistent and many strange issues happen depending of the Android version (well from start, webview is so broken in Android).

In the browser, it may be different though (like for chrome). So i'm not sure if disabling it for all android native browser is overkill since there may be some that works :/

[mourner]

I really didn't want to disable it for all Android browser versions by default because it's so much smoother with it, and seeing Leaflet being slow on a modern Android 4 smartphone or tablet is quite frustrating... If only we could isolate the bad behaving versions somehow...

[Mathbl]

Yes you're right.

The problem is not related mainly to older devices. I've had a GalaxyTab 10.1 running 4.0.4 crashing (if 3D not disabled).

On Nexus 7 4.1 it seems correct for the 3D, but there's this frustrating problem of click being fired twice (issue #1041), causing the zoom button tap to zoom 2 steps at once and also popup closing on marker click etc.

**EDIT finally, it also crash with Nexus 7 4.1 when using the zoom button and 3D enabled

[florianf]

I tried with L_DISABLE_3D = true, but pinch-to-zoom still freezes the browser.

I made a mistake in the initial report, the exact Android version is: 4.1.1 and the phone runs Samsung's firmware.

[mourner]

Are you sure you set it before including Leaflet JS?

[florianf]

I'm sure. I included leaflet-src.js and put it there on the first line.

[mourner]

Oh, I see that it's not a crash but a freeze, so must be something different... Do you know if it reproduces on SDK emulator?

[davidd8]

I'm seeing the same problem, the map freezes with any zoom interaction whether or not 3D is enabled. This is using the default Android browser with the Samsung firmware for Android 4.1.1

[damianofontana]

I'm seeing the same problem with Samsung Galaxy Note 2 with Android 4.1.1 and leaflet 4.5. After the pinch-to-zoom or the zoom with the control button the map freezes and it doesn't respond to other zoom actions. The zoom starts to work again when the user moves the map and leaflet redraws the vector layers.

[florianf]

As a temporary workaround for this issue, you can fallback to the Android 2.3 behaviour of Leaflet. In Browser.js Line 15, quick proposal:

android23 = ua.search("android [23]") !== -1 || ua.search("android 4.1") !== -1,

[davidd8]

@damianofontana and @florianf Thanks, your quick proposal is a great workaround for this!

[mourner]

It would be great if you guys could investigate and debug this further... If transitionEnd callback fires correctly, what else could not work after pinch zoom end? I don't have Galaxies currently to test on so any help in fixing this bug is greatly appreciated.

[danzel]

transitionEnd not being fired was my thoughts too. I have a Galaxy S2 with Cyanogen Mod Android version 4.1.2, no issues on master or 0.4.5 here.

I'm just testing touch zoom and button zoom on map/map-mobile.html, is that page enough to reproduce it?

[mourner]

@florianf @davidd8 @HooliganQC @damianofontana guys, I would appreciate any help on tracking down and fixing this issue... Would be great to wrap this up before releasing 0.5.

[florianf]

Sorry, I can't test no more, because the device was only borrowed. As soon as Samsungs releases 4.1 for the Galaxy SII I'm able to test again. We weren't able to reproduce it in the emulator.

[nhinze]

I have a Galaxy S3 with Android 4.1.1 and can reproduce the issue. Before, it worked great on Android 4.0.4. Let me know what I need to test.

[nhinze]

Using:

android23 = ua.search("android [23]") !== -1 || ua.search("android 4.1") !== -1,

fixes the zoom issue on Samsung Galaxy S3 with Android 4.1.1

[mourner]

Guys, can you reproduce the same issue on Android 4.1.2?

[nhinze]

The latest update of my phone is 4.1.1. Not sure when I'll receive 4.1.2.

[mourner]

I see... Could you please try running the following in the 4.1.1 console (or through an alert) and report the results?

'transition' in document.documentElement.style;

[nhinze]

I get 'true' with the default Android 4.1.1 browser by placing the following in the head of the page:

<script type="text/javascript">
    alert('transition' in document.documentElement.style);
</script>

Note: For some reason, Chrome on Android reports 'false'

[mourner]

Ahha, I KNEW it! Now please try placing the following code after Leaflet but before application code and see if it started working:

if (android411) { // ... skipping detection code
    L.DomUtil.TRANSITION_END = 'webkitTransitionEnd';
}

[nhinze]

Ok, improvements. I now see a marker and polyline animation when pinch zooming. However, once I release the pinch zoom, the map is frozen.

[mattiasb]

A guy at my job has a Note 2 with 4.1.2. Is there something specific to test? Just pinch-zooming and see if the map freezes?

[mourner]

Yep, and regular button zoom too.

[mattiasb]

Did a quick test on my coworkers Note 2 with 4.1.2 before he had to leave, osm.org seems to work fine in chrome on his phone at least but I'm guessing the problems occur in the stock browser? Henrik promised me to check some more in the stock browser and report back!

[nhinze]

www.openstreetmap,org map freezes after the zoom animation on pinch zoom or using the "+" button. Using Samsung Galaxy S3 on Android 4.1.1 and stock browser. Not sure which LL build they use.

[mattiasb]

0.4.4

[mourner]

Nope, osm.org uses an older master (before I remembered to update L.version). (Still needs checking on 4.1.2 though)

[mattiasb]

Ah. :)

[nhinze]

Use this link. It uses yesterday's build (CloudMade-Leaflet-v0.4.4-315-g8c481d5.zip)

http://www.mycoursewalk.com/mobile_course_walk/course_view/752

[calvinmetcalf]

I as able to test on manymo.com: osm.org caused a crash on 4.1 when hit the zoom button, but not when I double tapped (clicked) to zoom, @nhinze your map didn't have zoom buttons on the mobile view so I wasn't able to test, I had a map laying around that used an old build which caused a crash when I hit zoom, when I updated leaflet-src.js to the one I build off 8c481d5a87765331a91f99d69bf5a54ab6e96475 it didn't crash when I hit the zoom in button.

[nhinze]

I updated my link so that it also has buttons for Android 4 and up. I added the test script:

if (android411) { // ... skipping detection code L.DomUtil.TRANSITION_END = 'webkitTransitionEnd'; }

Results on Android 4.1.1 stock browser. Zoom button, double tap zoom and pinch zoom freeze AFTER the zoom animation.

http://www.mycoursewalk.com/mobile_course_walk/course_view/752

[mourner]

@nhinze I meant that you need to actually detect Android 4.1.1, just skipped it to save time. OK, try the following code:

if (navigator.userAgent.toLowerCase().indexOf('android 4.1') !== -1) {
    L.DomUtil.TRANSITION_END = 'webkitTransitionEnd';
}

[nhinze]

It's working again! Pinch, button and double tap zoom are working with the fix above! Sorry about the mixup.

[mourner]

Yay! @danzel looks like we'll have to add some horrible version-specific Android hacks again. Now we need to check if it's only needed for 4.1.* or for 4.2+ too.

[mattiasb]

I have 4.2.1 on my Galaxy Nexus, osm.org works fine on that device at least. (Still not sure if osm.org is a good site to test this against or if this is Note 2-specific).

[calvinmetcalf]

I have a nexus 10 running 4.2.1 (4.2.0 was very short lived, it was missing the month of December), 4.2.1 doesn't have the stock browser, Chrome is default.

[nhinze]

If Android doesn't have a stock browser anymore on 4.2, what does it use when an app needs to run a WebView (Like PhoneGap or Rhomobile apps) ? The Chrome WebKit engine?

[mattiasb]

@calvinmetcalf it's still there on Galaxy Nexus phones upgraded to 4.2.1. (and it works fine in both stock and chrome there) Also tested on my workmates 4.1.1 galaxy nexus and there it actually crashes instead of freezes on the stock browser (all is fine in chrome).

[nhinze]

@moonlite does the map at http://www.mycoursewalk.com/mobile_course_walk/course_view/752 work on your workmate's 4.1.1 galaxy nexus? Make sure to refresh the page or delete the cache. The stock browser is pretty bad at reloading a page.

[mattiasb]

nhinze: yep works fine! (both stock and chrome)

[nhinze]

The fix above also fixes the map freeze on zoom in WebView apps on Android 4.1.1

[mourner]

Thanks to everyone for help! I'll include the fix in the upcoming 0.5 release.

[danzel]

@mourner Rather than doing it as an if android hack, we could change the L.DomUtil.TRANSITION_END setting to do a property test perhaps?

This would also get around that chrome canary bug (which is now fixed in canary) where it was transform, transition but webkitTransitionEnd (which sounds exactly the same as this bug)

[mourner]

@danzel There's no way to test for the existence of the event without waiting it to fire. Do you mean testing if there's webkitTransition and using webkitTransitionEnd if it is (disregarding transition presense)?

[danzel]

Ah bugger yeah you are right. What you've just suggested might be an idea, prefer using the webkit one over the unprefixed one (Assuming the android 4.1.1. browser exposes the webkit prefixed one)