iOS map stops drawing - "Too many active WebGL contexts" despite .remove()

[wthorp]

I have a single page application which has one main map, and also frequently displays new pages with smaller maps on them. When I close these pages, I call .remove() against these smaller maps.

When using iOS Safari or iOS chrome (iPhone SE), after ~15 new pages are opened, the main map no longer renders. I'm quite sure this is related to #2656 "Too many active WebGL contexts." The same behavior happens on desktop Chrome if you neglect to call "remove()".

See example here: https://jsfiddle.net/bill3000/mpLkqcdz/1/

mapbox-gl-js version v0.41.0:

Steps to Trigger Behavior

1. create a map
2. .remove() the map
3. repeat ~15x

Expected Behavior

First map always renders

Actual Behavior

First map ceases to render

I've read #2656, but I'm curious if there aren't orthogonal solutions. Can you use the same WebGL context across all maps? Can you "detach" and "reattach" a map from the DOM to reuse a WebGL context?

[mourner]

It seems that there's nothing we can do on the GL JS side to help with this browser limitation, so I'm going to close. Will reopen on any suggested solutions.