0

I have a Leaflet Vue map I display in my web app. While everything works properly in other browsers there is a really annoying flickering that happens to elements on top of the map when I zoom on it.

From what I can see in the inspector and online, the map tiles are moved using the translate3D CSS code, and I can see online it may be related to my issue.

Is there some property I can add somewhere to fix the flickering?

In the example below, the map scale flickers, but even other elements that aren't children of the <l-map> tag seem affected.

<l-map :zoom="zoom" ref="myMap">
<l-marker :lat-lng="targetLatLng"></l-marker>
<l-control-scale
position="topright"
:metric="true"
:imperial="false"
></l-control-scale>
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
</l-map>

EDIT: I should add that it seems panning the map does augment the probability of the issue happening, which maybe does confirm that the translate3D property has something to do with this

Pop Flamingo
  • 3,023
  • 2
  • 26
  • 64
  • Have you tried the solutions discussed on the link you provided? – Kapcash Apr 24 '22 at 15:55
  • Tried the meta viewport tag and -webkit-backface-visibility but as far as I can tell it doesn't seem to work, it *may* be helping a bit but it's really hard to tell. As some people say on the link it's unfortunately really random – Pop Flamingo Apr 24 '22 at 19:16
  • @Kapcash I should also add that it seems panning the map does augment the probability of the issue happening, which maybe does confirm that the translate3D property has something to do with this – Pop Flamingo Apr 24 '22 at 19:23

0 Answers0