Zoom issue with Chrome/Chromium on Android

[JaredRowe]

Hi,

Long time lurker, first time poster! Firstly to give a bit of background, I have been working on a mobile application for both Android & iOS, using Phonegap and the ESRI JSAPI v3.7. My predominant Android test devices have been Nexus 4 & 7, both running Android 4.3. I now have a Nexus 5 that runs Android 4.4 KitKat, which has led me to discover this issue.

Phonegap wraps a web-app in an Android WebView, and until now it has run ok on any devices up to and including Android 4.3, as WebViews were rendered using a WebKit engine. In Android 4.4, the WebView has changed to be based on Chromium, the same as Chrome for Android browser, see here.

I discovered that when trying to zoom in from a much higher scale, the transition would hang and the app won't respond. Occasionally it will eventually it will correct itself (ie 5+mins I have noticed). To ensure it was not an issue with our code, I tested using some of the ESRI samples, found the same thing occurring in Chrome on Android.

To reproduce, try this JSFiddle in Chrome on an Android device. Press the zoom button go to the level specified in the input field. By default it zooms in from lvl4->14 which should demonstrate the issue. It does not occur on a mobile Webkit based browser such as Safari on iOS, or on the desktop version of chrome, only Chrome for Android or when embedded in a WebView (Android 4.4 only).

I have tested on multiple Android devices, all running Chrome version 29 & 30, occurs in all of them. Have also been able to reproduce it using our full web application that is deployed on JSAPI v2.8, so I believe it may not be a new issue. It has only become apparent to me due to the switch in rendering engine for the WebView in KitKat.

Hoping someone else might have encountered this, appreciate any assistance I can get!

Cheers,

Jared

[AmeyaNatu1]

Hi,

I have tested your application on my own Android (4.4.2) Device (Samsung Galaxy Note 2). However I did not reproduce the issue. I am able to zoom to that level (zoom level :14) also I am able to pan the map easily.

[JaredRowe]

Thanks Ameya.

This was lodged as a bug with ESRI a few months ago. Have not had an update from them since, still seems present in JSAPI v3.9 although like you I can't seem to consistently reproduce the issue with that JSFiddle any more, guessing due to updates to Chrome.

We actually worked around the issue anyway. Rather than loading the map at the full extent and then trying to zoom in once the user is geolocated, we instead geolocate and use the result to set the initial map extent.

Jared

[chetnamittal]

Hi Jared,

We are facinng the issue on Android 4.4. Ours is a sencha application(2.3.2).
It runs inside Tibco Silver Mobile which is based on phone-gap.

To work with maps , we are using ESRI javascript API 3.8.


We have the following set up for maps-

1)We have bing as the base map layer.
2)On that , polygons are place that are ESRI polygons .
3)On the top, we have geolocation APIs that track the user's current location



When we render this map on Android, we try to set a default zoom level . Now, in Android 4.4, zoom level greater than 12  does not work. Even on 12 it gives the following issues-

1)Pinning does not work---> This means that when user tries to pin, it takes a very long time for the map to set the zoom level which in turn hangs the application
2)Zoom slider responds after a very long time

3)Any other control on this screen take ages to respond..


Basically every response is delayed and if user keeps on interacting without waiting for the map to respond, so it hangs the aplpication.


I read from the your comment, that you could fix the issue with some workaround.

Can you please help us here. We are in the crtical stage of the project and need to fix this issue desparately.

Thanks in advcance!!!!!!



Chetna

[chetnamittal]

HI Team,

I am also facing this issue in my app. My app is sencha based . And on Android 4.4, if user tries to pinch, it hans the entire app.

Is there any solution to this.

Chetna

[YannCabon]

Hi,

We have fixed the problem in 3.12

This is a compositing bug in Chromium. We have logged the issue: Issue 437904 - chromium - Applying opacity to element with big scale transform freezes the page - An...

A workaround for previous releases of the API is to set fadeOnZoom to false on the map Map | API Reference | ArcGIS API for JavaScript This disable the fading for the tiles in TiledMapServiceLayer

[chetnamittal]

Hi ,

We used 3.12 version.But the issue is not fixed.

My application is getting freezed on zoom in.

Can you please help.

Thanks,

Chetna

[MichalBeniak]

Hello,

We have the same problem on android 4.4. When our application zoom from 2 000 000 to 1000 (zoom to current location), it freezess the app for 3-5min. Javascript API 3.12 dont work and also property fadeOnZoom = false...Can anyone help with some workaround? Or the date when it will be fixed?

Thanks,

Michal

[YueWu1]

Hello Michal,

I think this is related to Chromium WebView, the hardware accelerated canvas rendering is not supported in Android 4.4 or previous version. Add this line to the WebView to turn off hardware accelerated canvas and it should works.

mWebview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

For more information, please check this Android page:

Hardware Acceleration | Android Developers

I tested with Anroid 5.0 it works fine. FYI this as well if you curious, ​Google: Why we won't patch pre-KitKat Android WebView | ZDNet