glitchy map rendering with all lines turning dotted after adding a Marker when using Vue

[whatoeat2night]

mapbox-gl-js version: 1.11.0

browser: latest Chrome

Steps to Trigger Behavior

import MapBox from 'mapbox-gl'

1. add a marker on map using MapBox.Marker().setLnglat(lngLat).addTo(map) 2.then use mouse to zoom in or zoom out 3.the whole map changed

Link to Demonstration

Hard to paste code to jsbin, very sorry about that. Could you please give some potential reason to cause this problem? https://jsbin.com/

Expected Behavior

Actual Behavior

[mourner]

We haven't seen anything like this before and I don't have any ideas on what might be wrong, so we'd need a reproducible live test case to diagnose this.

[andrewharvey]

Hey that's the same issue I ran into at https://twitter.com/alantgeo/status/1267024845037948933 I narrowed it down to an issue with the chained methods AND when using Vue.

So you should be able to solve it by making the method calls on their own and not chaining them.

I'm not sure if it's a Vue issue, user issue or GL JS issue though.

[mourner]

@andrewharvey wow, that's super puzzling. Sounds more like some browser / GPU race condition where a certain combination of DOM manipulations botches WebGL rendering.

[andrewharvey]

@mourner jsfiddle https://jsfiddle.net/andrewharvey4/hs4dvzym/10/

yeah it's really weird but always guessed I was doing something wrong.

EDIT: you just need to zoom the map and you should see the issue

before zooming:

after zooming:

[andrewharvey]

@andrewharvey wow, that's super puzzling. Sounds more like some browser / GPU race condition where a certain combination of DOM manipulations botches WebGL rendering.

I can replicate on Chrome and Firefox on both Linux and Android so it doesn't feel like it's a browser or GPU bug.

[mourner]

Wow, this is super weird! Another way to "fix" the bug in the JSFiddle is to replace this.marker = ... with var marker = ..., so this also plays a role here. 🤷‍♂️

[whatoeat2night]

My problem is related with Vue JS. I have a measuring-distance object which holds a Marker on map. I then use Vue.observable(measuring-distance) to create a new object. After doing this, the bug mentioned-above happened. After removing Vue.observable, it never happens.

[asheemmamoowala]

I can reproduce this issue (using the jsbin from https://github.com/mapbox/mapbox-gl-js/issues/9874#issuecomment-658800518) on Chrome Versions 83.0.4103.116 and 84.0.4147.89.

It reproduces as far back as GL-JS v0.43.0, before which the Marker API doesnt seem to have the same API/default marker icon

[mourner]

Found a previous occurrence of this bug: #6121. It appears that indeed Vue Observable messes up with GL JS objects in some weird ways (https://github.com/mapbox/mapbox-gl-js/issues/6121#issuecomment-365614165). Removing marker: null from data in the view also fixes the issue. I'm not sure how to go about it — this may be something we wouldn't be able to fix on our side, and more of a Vue issue.