无法在移动设备上滚动Google地图弹出窗口

Question

当用户点击地图上的标记时，我会显示一个弹出窗口（我使用的是Google Maps JavaScript API）。

HTML：

<div id="map"></div>
<div id="popup" class="popup-bubble-content">
    ... content inside
</div>

CSS：

.popup-bubble-content {
    z-index: 1000000;
    position: absolute;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

JavaScript的：

var popupList = document.getElementById('popup');
... some processing code
popup = new Popup(latLng, popupList);
popup.setMap(map);

在移动设备上，您可以点击弹出窗口中的内容，但不能触摸滚动。滚动在带有触控板或鼠标的PC上运行良好，但触摸滚动不起作用。

我试过......

• 在div上设置高度
• 将z-index设为高数
• 设置overflow-y滚动/自动;
• 添加-webkit-overflow-scrolling：touch;
• 设定位置：已修复

这些都不适合我。

这是弹出窗口的picture。滚动条可见，但触摸滚动不起作用。

编辑：

我做了一个小小的发现。如果我附加弹出窗口说，body元素创建后，它可以正常工作，但它没有正确定位。触摸滚动问题是由popup.setMap(map)引起的，之后弹出窗口变成了MVCObject，并成为Google Maps API创建的一些随机元素的子代。

我很确定这是一个错误，或者至少是一个非预期的功能。我正在提交错误报告。

Answer 1

我确信在嵌入论坛之前我已经看过这个，我会尝试将overflow-y: auto;更改为overflow-y: touch;，并确保选择内容宽度和高度并重复他们贯穿始终