Canvas source starves CPU on Safari Mojave (10.14.2)

Nobody has claimed this yet.

We've noticed our users on Mojave Safari having issues, which I've been able to track down to the canvas source layer that we use. Note this was working fine in 10.13, but started showing issues in 10.14.

safari Version 12.0.2 (14606.3.4)

I've been able to reduce it to this minimum case: https://output.jsbin.com/wojusalawu

If you tap on the map, an icon should show up and a (rather intense) animation should start. I know the animation could be done in a more efficient manner, but this makes it easier to show case the problem.

On safari 11, 12.0 and even 12.0.2 on MacOS 10.13, the icon is drawn immediately and the animation is shown. On Safari Version 12.0.2 (14606.3.4) (Mac OS 10.14), the icon takes sends to draw, and sometimes appears to never draw at all.

Task switching away from Safari and back, seems to show the icon. But I suspect the real root cause here is a change in how requestAnimationFrame is handled. Causing the app to effectively draw the canvas wihtout ever getting a chance to do anything else. Task switching just ensures the requestAnimationFrame stops firing (because it's in the background).

Note: this works fine in Chrome, it's just Safari on the latest Mac OS.

If this is a bug in Safari/MacOS, is there a workaround you can think of? Right now, our app is effectively broken on Safari because of this

PS. this is only on desktop - things work fine in iOS

(Using mapbox 0.52.0)

Start with the linked minimal JSBin reproduction and the canvas source layer in mapbox 0.52.0; compare requestAnimationFrame behavior on Safari 12.0.2 with macOS 10.14 against macOS 10.13 and Chrome. Done means identifying a viable workaround that prevents CPU starvation while rendering the icon and animation, or confirming that the behavior is an unworkable Safari/macOS bug.

Written by the indexing model from the issue text.