Angular 移动设备上的传单图块未正确加载

Question

我正在使用 Cordova 为 iPad (IOS 8.1) 构建的 Angular 6 项目添加传单 (1.3,3)。我遇到了与 this question and 类似的问题，但大小似乎不是问题所在。 map.getSize() 总是 returns 正确的大小（在各种生命周期挂钩中检查），所以 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- 前缀..

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

Answer 1

这个拉取请求有问题：

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

Leaflet DomUtil.js 代码中存在错误，导致某些 webkit 浏览器无法选取适当的样式。希望这将在 Leaflet 的未来版本中得到修复。

Angular 移动设备上的传单图块未正确加载

Leaflet Tiles Not Loading Correctly in Angular on Mobile

angular

ipad

mobile

leaflet

tile