setData performance decreased in safari compared to v1.0.0

[mmuelder]

Greetings!

In the current version 2.0.0 (as far as I know actually since 1.10) the performance of setData combined with a moving camera has extremely decreased in comparison to 1.0.0. We only encountered this problem in the safari on iphones and ipads, no other browsers seem to have this issue, at least not in this magnitude. The circle layer in this example is super laggy:

V 1.0.0 (left) versus V 2.0.0 (right)

(recorded on safari @ ipad air 2 12.4.1, same problem on all tested iphones)

Steps to Trigger Behavior

Use setData in combination with a moving camera (easeTo), maybe it also has something to do with circle layers.

Link to Demonstration

The code of the examples seen above can be found here:
https://jsbin.com/hagivowiko/edit?html,output

just replace

<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />

with

<script src='https://api.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />

to see the increased performance (in safari).

Expected Behavior

at least the same performance as 1.0.0

Actual Behavior

extremely laggy drawing/update of the circle layer

[stephenheron]

We are seeing something similar, we were on an old v0.53 version and I upgraded to the latest v2.0 and calls to setData in Safari is a lot slower.

I went back and checked the versions, for us v1.2.1 was speedy but anything past that, the setData performance is pretty bad.

[stephenheron]

I did a little more debugging and I think commit 5f8f1c2 might be the issue. It is quite a chunky commit so not had time to dig into it yet.

[vitaliyhayda]

same degraded performance issue in Safari on iOS devices

[mourner]

Submitted a PR addressing this issue in #10417 — please try it on your use cases and let me know if there are any problems with it!

I did a little more debugging and I think commit 5f8f1c2 might be the issue. It is quite a chunky commit so not had time to dig into it yet.

@stephenheron thanks so much for bisecting to this commit, this made my job fixing this much easier!

[stephenheron]

@mourner Nice one. I just tried out your fix and it is 100% better now in Safari for me. Can't tell the difference between Safari and Chrome/Firefox whereas before it was very noticeable.

Glad my bisecting was useful, I tried to help further but the code in that commit was very complicated. Thanks for the detailed PR so I can see what was changed and hopefully learn what was going on as it was bugging me that I couldn't figure it out.

[mmuelder]

Where or how do I get a mapbox-gl.js file with the new code from the PR to test it with our application?

[ansis]

@mmuelder This fix is part of v2.2.0-beta.1 which is available on both the cdn and npm

https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.2.0-beta.1