mapbox / mapbox/mapbox-gl-js

.loseContext() / .restoreContext() breaks the map (WEBGL_lose_context)

Open
#9,516 11 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: 1.9.1 / latest release (or whatever the examples page uses.)

**browsers**:
- Chrome Version 80.0.3987.163 (Official Build) (64-bit)
- Firefox 75
(On Ubuntu 16.04 / i7-6700k GPU)

### Steps to Trigger Behavior / Link to Demonstration

1. Go to the demo page: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
2. Open developer tools and ensure that the iframe with the map is active.
3. var ext = document.querySelector('#map canvas').getContext('webgl').getExtension('WEBGL_lose_context')
4. ext.loseContext()
5. ext.restoreContext()

### Expected Behavior

Map view goes blank on .loseContext() and comes back on .restoreContext().

### Actual Behavior

Map view goes blank but does not come back.
Instead many WebGL errors appear on the console:

WebGL: INVALID_OPERATION: bindBuffer: object does not belong to this context value.js:403
WebGL: INVALID_OPERATION: bindBuffer: object does not belong to this context value.js:416
WebGL: INVALID_OPERATION: bindTexture: object does not belong to this context line_atlas.js:200
WebGL: INVALID_OPERATION: bindTexture: object does not belong to this context texture.js:92

### Notes

I discovered the problem while experimenting with a custom layer.
Our stuff came right back after handling the appropriate events ("webglcontextlost" and "webglcontextrestored").
Otherwise, similar bindBuffer errors occur.
After some panning and zooming around it looks like the map (line and symbols layers) works everywhere, but in area/zoom that were active when lose/restore happened.

For the example map only the symbol layers seems to work elsewhere?!

I'm not really sure if this is a real problem, or occurs only with the extension.
However I'm not aware of another possibility to trigger context loss for debugging purposes, so it would be nice if this works :)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the loss and restore sequence on the simple-map example, then trace the reported bindBuffer and bindTexture errors in value.js, line_atlas.js, and texture.js. Check the webglcontextlost and webglcontextrestored handling described in the issue, and verify that the map renders correctly across the previously affected areas after restoration.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.