Mapbox-gl-js: Drawing example very jittery in Firefox

[jaapster]

Drawing and updating a polygon in Firefox using the mapbox-gl-draw example code is very jittery at larger map sizes.

Platform: macOS Sierra on a MacBook Pro mid 2015

Mapbox SDK version: 0.32.1

Steps to trigger behavior

1. Create an HTML file containing the code of the mapbox-gl-draw example
2. Open this file in Firefox and set browser size to 1700 x 1000 pixels
3. Draw a polygon
4. Update the polygon by dragging one of it's coordinates

Expected behavior

A smooth drawing experience

Actual behavior

The polygon is not changing smoothly. The change is (very) jittery. It feels like the rendered polygon is jumping back and forth between the current state and previous states.

[1ec5]

Possibly related? #4060

[ravraponi]

I have found that the Firefox version 51 is very jittery with the drawing tool. The beta or developer version is only slightly better.
Is it because of the webgl2?
https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/

[jaapster]

I just tested in FF Developer Edition on MacOS and it performs even worse.

[clif-os]

Experiencing the same issue with 2 different mapbox web applications. Any change to the drawing or updating of data in-session (ex: for hover effects) is slow and jittery in Firefox and extremely slow internet explorer (but is performant in Chrome).

[eltonjuan]

Just downloaded Firefox v.48.0b1 and can confirm that this issue was introduced at some point after that.

[jaapster]

I just tested in Firefox 57.0 (Quantum) and drawing is not jittery anymore but very slow. The geometry updates seem to be lagging and have to "catch up" with the cursor. This is surprising as tilting and rotating a full screen map in FF 57 is considerably smoother than in Chrome.

I have included screencaptures using my own drawing module.

Chrome:

Firefox Quantum:

The more setData requests a source receives, the more it appears to "choke up" in Firefox.

(For IE11 and Egde we can only dream of remotely usable performance)

[mourner]

I just tested this on Firefox 61 and it seems to work smoothly. 🎉 Let's close this for now then.

[mourner]

For reference, here's the example I tested on: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

[gorshkov-leonid]

Hi, @mourner. Now we are using mapbox-gl-js 0.47.0 and testing on Firefox 62.0. We have lags in this example. You can copy this example and check in Firefox:
https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
Note, It is important, open this example in full screen.

I realize that this example uses 'mapbox-gl-draw' plugin and you can say that it is problem of plugin, but we have same problems in own implementation.