Android/Cordova WebView native HTML 选择导致奇怪的 DOM 行为

Question

我正在使用 leaflet.js 开发带有嵌入式 map View 的 Android/Cordova 应用程序。我使用的设备是 Nexus 7。 map 是使用 TileLayer 加载的，一切都很好，直到...我单击表单中的表单选择控件，然后出现 native Android 选择器。从那里开始， map 图 block 在 x 和 y 方向上都移动了几个像素。当我在同一台设备上的 Chrome 浏览器中运行网络应用程序时，没有问题。似乎与 Cordova DroidGap 或 Android WebView 隔离。看起来 DOM 或 WebView 容器中发生了一些奇怪的事情，这会导致瓷砖图像脱落。尝试在单击选择之前和之后检查 map 容器的大小，但没有区别。尝试记录 DOM 并且在两种情况下都相同。

有人有任何其他建议去哪里看吗？

有什么方法可以禁用这个原生选择器吗？

Answer 1

呜呜呜!找到它......或者是一个解决方案。仍然不太确定问题的根源是什么。要解决此问题，您需要设置传单的全局 L_DISABLE_3D切换为真。

我可以在我的应用程序的精简版本中重现该问题，该版本仅将 Bootstrap 、传单和 cordova 作为依赖项。该应用程序有一个导航栏，第一行有一个下拉导航项，第二行有一个传单 map 。该问题仅在其托管在 cordova 应用程序(即 webview)中时发生。

注意:我无法在移动或桌面浏览器上复制该问题。

要重现问题，您需要 1)。单击导航栏下拉菜单(帐户)使菜单出现 2).然后触摸 map 。结果将是一种错觉，即瓷砖的尺寸变大并因此扭曲 map ，即道路不再排列并且标签被切断。我已经记录了触发器前后的图像大小并获得了相同的大小。这让我相信问题与像素密度或其他一些我不理解的图形现象有关。

目前还不清楚问题是与 leaflet、cordova 还是 Android 原生 WebView 有关。

更新:请参阅下面的评论以获得更好的解决方案。