Markers move from their positions when zoom/unzoom

Question

mapbox-gl-js version: 0.38.0 Using via npm repo, on ionic 2.2.11

As you can see on this gif https://giphy.com/gifs/ionic-angular-mapbox-3ohz6z8ejG5tf64tmo, i have 4 markers, three don't stay on their positions, only one is good. But each one is implement by the same way:

var el = document.createElement('div');
el.className = 'marker';
el.id = this.id;
el.style.backgroundImage = 'url(' + type.getImgUrl() + ')';
el.style.width = '32px';
el.style.height = '32px';

// add marker to map
new mapboxgl.Marker(el, {offset: [-16,-16]})
.setLngLat(this.getlngLat())
.addTo(this.map);

I took it from the documentation: https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

So I don't understand why, they do that.

Thanks in advance for your help.

Answer 1

If you inspect the markers, they should have position: absolute. There are some documented issues around this in the mapbox-gl repo. Common causes are: incorrectly importing the included mapbox style file (or not including it at all), and overriding the marker display styling.