CODEWITHSUNDEEP
androidcordovaleaflet
whyvez
whyvez

Reputation: 323

Android/Cordova WebView native HTML select causes weird DOM behaviour

I am working on an Android/Cordova app with an embedded map view using leaflet.js. The device I am using is an Nexus 7. The map is loaded using a TileLayer and all is good until... I click on a form select control in a form and the native Android picker appears. From there on the map tiles are all shifted a few pixels in both x and y direction. When I run the web app in the Chrome browser on the same device there is no issue. Seems isolated to with the Cordova DroidGap or Android WebView. Looks like something weird is going on in either the DOM or WebView container which throws the tile images off. Tried inspecting the map container size before and after the select was clicked but there is no diference. Tried logging the DOM and same in both case its identical.

Anyone have any other suggestions where to look?

Is there any way to disable this native select picker?

Upvotes: 1

Views: 1331

Answers (1)

whyvez
whyvez

Reputation: 323

WOOOOHOOO! Found it... or a solution that is. Still not too sure what the root of the issue is. To fix the problem you need to set leaflet's global L_DISABLE_3D switch to true.

I can replicated the issue in a stripped down version of my app which only had bootstrap, leaflet and cordova as dependencies. The app has a navbar with a dropdown nav item in the first row and a leaflet map in the second row. The issue only happens when its hosted in a cordova app i.e. webview.

Note: I cannot replicate the issue in either on a mobile or desktop browser.

sample test app

To reproduce the issue you need to 1). click on the navbar dropdown (Account) to make the menu appear 2).then touch the map. The result will be an illusion that the tile grow in size and therefore distorting the map i.e. roads do not line up anymore and labels get cut-off. I have logged the image size before and after the trigger and got the same size. This leads me to believe hat the issue relates to pixel density or some other graphical phenomenon that I don't understand.

Still at this point it s unclear if the issue relates to leaflet, cordova, or the Android native WebView.

UPDATE: see comments below for a better solution.

Upvotes: 1

Related Questions