Question

我正在为使用Cordova为iPad（IOS 8.1）构建的Angular 6项目添加传单（1.3,3）。我遇到的问题与this question和this one类似，但是大小似乎不是问题。 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

Leaflet DomUtil.js代码中存在一个错误，该错误阻止某些Webkit浏览器选择适当的样式。希望在以后的Leaflet版本中可以解决此问题。

传单在移动设备上的角度不正确加载

1 个答案: