传单图块在移动设备上的 Angular 中无法正确加载

Question

我正在为使用Cordova为iPad(IOS 8.1(构建的Angular 6项目添加传单(1.3,3(。我对这个问题和这个问题有类似的问题，但大小似乎不是问题。map.getSize()始终返回正确的大小(在各种生命周期钩子中检查(，因此map.invalidateSize()无法解决问题。瓷砖无法移出角落是否有其他原因？我注意到磁贴没有得到它们在浏览器中所做的transform: translate3d(..)。

一些示例代码：

ngAfterViewInit() {
this.map = L.map(element,
{
attributionControl: false,
center: [40, -93],
zoom: 4,
zoomControl: false,
maxBounds: [
[-4, -150],
[70, -35]
],
maxZoom: 5,
minZoom: 0
})
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png')
.addTo(this.map);
this.map.invalidateSize();
}

请注意，该地图在浏览器中按预期工作，并使用 Chrome 的兼容性工具来测试不同的尺寸。但是，当它加载到 iPad 上时，所有磁贴都会在左上角相互叠加渲染。此问题不会发生在更高版本的IOS上，但如果可能的话，我想保持兼容性。

我尝试将this.map.invalidateSize()调用放在不同的 Angular 生命周期钩子中，但无济于事。我什至尝试添加一个按钮，当按下时调用map.invalidateSize()，但这也没有用(大概是因为大小是应该的(。

我现在最好的猜测是这与缺乏transform: translate3d(..)有关。如果我打开 Safari 的开发工具来编辑 iPad 内容，我可以将-webkit-transform: translate3d(401px, 285px, 0px)添加到磁贴并使其转到正确的位置。似乎传单没有意识到它需要添加-webkit-前缀。.

诚然，有许多与此非常相似的问题，但没有一个答案似乎合适。

Answer 1

此拉取请求存在以下问题：

https://github.com/Leaflet/Leaflet/pull/6290

传单DomUtil.js代码中存在一个错误，阻止某些 webkit 浏览器选择适当的样式。希望这将在未来版本的传单中得到修复。