Adding an MVTLayer breaks attribute transitions on Safari (MacOS + iOS)

[brambogaerts]

Description

After an MVTLayer loads its tiles, attribute transitions on other layers don't work or update. These layers stay in their pre-transition state. This only happens on Safari (both MacOS and iOS).

Expected Behavior

I expect attribute transitions to work regardless of the presence of an MVTLayer tile.

Repro Steps

• Open the CodePen that reproduces the behaviour in Safari.
• Insert your MapBox API token on line 3 (the issue doesn't come up if there is no token supplied, because tiles will fail to load and thus no tiles are added to trigger the bug).
• Click on the map. The circles transition to a bigger radius.
• Change addMVTLayer on line 4 to true.
• After the map tiles load, click on the map once more. The circles don't transition but stay small.
• The above procedure can be repeated in Firefox of Chrome, and the circles will transition there.

Environment

• Framework Version: 8.6.4
• Browser Version: Safari 15.1
• OS: MacOS 12.0.1 / iOS 15.1

[Pessimistress]

This is likely connected to https://github.com/visgl/deck.gl/issues/6328

The issue is not specific to MVTLayer; any other layer seems to break the transition, but only if the other layer is rendered before the ScatterplotLayer. When the ScatterplotLayer is rendered first then it seems to behave as expected.

It might have something to do with Safari failing when a TransformFeedback is bound/unbound in the middle of redrawing a frame. I'll see if I can reproduce it with raw WebGL. @ibgreen

[ibgreen]

This is rather vague, but I recall that we had pretty bad problems with Chrome requiring that buffers be constantly unbound as they were alternately bound to TransformFeedback and "VertexArrayObjects" to be used for rendering, and luma.gl still contains special code for handling that messy book keeping.

I am not sure if Chrome still requires that handling. It could even be that perhaps the constant binding and unbinding now creates problems instead.

[brambogaerts]

Thanks for looking into it! Please do let me know if I can provide in any way 🙂

[Kris-B]

Is there any workaround for this issue ? Or a way to correctly detected this issue and disable transitions ?

[brambogaerts]

I ended up using custom a custom transition driver that updates the data on every frame. I played around with checking for Safari using the User Agent string and disabling the transitions that way. This worked, but in my use case I needed the transitions on all platforms.