Mapbox-gl-js: setData performance decreased in safari compared to v1.0.0
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
mmuelder
All 7 comments
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
on 23 Dec 2020
I did a little more debugging and I think commit 5f8f1c236cc9967309a6696aa8e3efca871f88ff might be the issue. It is quite a chunky commit so not had time to dig into it yet.
stephenheron
on 23 Dec 2020
same degraded performance issue in Safari on iOS devices
vitaliyhayda
on 18 Jan 2021
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!
mourner
on 26 Feb 2021
@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.
stephenheron
on 26 Feb 2021
Where or how do I get a mapbox-gl.js file with the new code from the PR to test it with our application?
mmuelder
on 1 Mar 2021
@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
ansis
on 24 Mar 2021
Related issues
mollymerp
·
3Comments
aaronlidman
·
3Comments
rigoneri
·
3Comments
stevage
·
3Comments
iamdenny
·
3Comments
Most helpful comment
@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.