iOS Mobile tiles briefly overlap controls

In version 0.7, at times when panning/zooming tiles may overlap the zooming controls. This seems to be a z-index issue. It can be easily fixed by applying a z-index to the .leaftlet-control-container like such:

.leaflet-control-container { position: relative; z-index: 1000; }

[rami-alloush]

Thank you @alexborisov for the insights! I had the issue with the controls in ngx-leaflet, adding this solved my problem.

  ::ng-deep .leaflet-control {
    transform: translate3d(0, 0, 0);
  }

[alexborisov]

👍 Hey I get the same issue with react-leaflet. In my case I have the map inside a relative container with an overlay container absolutely positioned over the top. I have z-index set high on the overlay and low on the map container. When I start to pan, specifically when new tiles are fetched, they appear over the top of everything - including the higher z ordered sibling overlay. It’s almost like the new tiles are completely outside the dom flow and ignore any rules of parent containers. I have tried nesting the map in div’s and setting their positions/zIndex’s with no success.

This issue occurs ONLY on iOS (as far as I can tell).

UPDATE

As I was writing this @james-brndwgn’s post gave me an idea to look and I noticed something on a hunch. The loaded tiles are images with style transform: translate3d(-6947px, -921px, 0px);. I set my overlay sibling container to transform:translate3d(0,0,0) and the issue was fixed.

My conclusion: translate3d is a hardware accelerated rule. On iOS there is probably some platform specific way in which this is being handled. Since the 3rd property is the depth it looks like the renderer, either by flaw or by design, is simply drawing over the top of existing content. Any interaction with the page that causes a render event (say toggle an accordion elsewhere on the page) causes the overlay to appear and everything to look nice again. By setting an empty translate3d property on my overlay I enable acceleration on that element and this seems to make the renderer to take it into account when rendering the tiles.

That said my overlay is now always on top as it should be, but the map controls (as pointed out by the OP) still disappear. Hope this helps in any way 😃