Leaflet Controls (zoom) disappears in Safari when map is zoomed or moved

Viewed 274

Several controls like Zoom disappear when you move the map. If the primary part of the map is close enough to the right side of the screen its fine, but once it drifts left the controls disappear. Any idea why this is happening? Here is a link to look at but this only is a problem in Safari, it seems to work just fine in Chrome and Firefox. https://net-control.us/map.php?NetID=3818

2 Answers

I also had the same problem, only from iOS. Especially when I used animation libraries. The solution is correct, just add the recommended parameters. In my case I insert in the CSS

.leaflet-top, .leaflet-left { transform: translate3d (0, 0, 0); will-change: transform; }

Appears to be an issue in Safari.

The WebKit bug (#8068 (comment)) was fixed 2022-04-20.

Confirmed workarounds include:

transform: translate3d(0, 0, 0)
will-change: transform

transform: translate(0) may also work.

(whether they should rather be applied to .leaflet-top, .leaflet-right, .leaflet-bottom, .leaflet-left or directly on .leaflet-control-container I can't test myself.)

See https://github.com/Leaflet/Leaflet/issues/8068

Related