Search code examples
here-api

Map Fails to load on Chrome on OnePlus 5T

I'm using the Here JavaScript web SDK and everything is working fine on every device and browser combination on BrowserStack. However, on a physical OnePlus 5T device running Chrome 77.0.3865.116 the map fails to load with the stack trace below in the console.

What I see is that the container for the map including map controls is displayed, the two markers that are added to the map are also briefly shown. Then the screen appears to redraw and the markers disappear leaving a grey, empty map with just the UI controls.

On the same device running Firefox, there are no issues. The stack trace is:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
mapsjs-core.js:377 Tangram [error]: Style: error compiling program for style '0_icon_library' (program key 'program') {texture: "icon_library", blend_order: 1, draw: {…}, mix: Array(1), name: "0_icon_library", …} TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at Function.Zl.disabled.Wl.createShader (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:215834)
    at Function.Wl.updateProgram (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:214896)
    at f.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:208515)
    at Object.getProgram (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:255275)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:507122)
    at t (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:506861)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:507018)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:506274)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:504451)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:504035)
Jr @ mapsjs-core.js:377
getProgram @ mapsjs-core.js:377
value @ mapsjs-core.js:377
t @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
$k.V @ mapsjs-core.js:286
n.Jh @ mapsjs-core.js:333
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
mapsjs-core.js:377 Tangram [error]: Style: error compiling program for style '0_shields' (program key 'program') {blend_order: 1, draw: {…}, mix: Array(1), name: "0_shields", mixed: {…}, …} TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at Function.Zl.disabled.Wl.createShader (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:215834)
    at Function.Wl.updateProgram (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:214896)
    at f.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:208515)
    at Object.getProgram (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:255275)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:507122)
    at t (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:506861)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:507018)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:506274)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:504451)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:504035)
Jr @ mapsjs-core.js:377
getProgram @ mapsjs-core.js:377
value @ mapsjs-core.js:377
t @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
value @ mapsjs-core.js:377
$k.V @ mapsjs-core.js:286
n.Jh @ mapsjs-core.js:333
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
requestAnimationFrame (async)
Xj @ mapsjs-core.js:234
zm @ mapsjs-core.js:332
n.Jh @ mapsjs-core.js:334
mapsjs-core.js:377 Tangram [error]: Style: error compiling program for style '0_text-blend-order' (program key 'program') {blend_order: 1, mix: Array(1), name: "0_text-blend-order", mixed: {…}, animated: false, …} TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at Function.Zl.disabled.Wl.createShader (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:215834)
    at Function.Wl.updateProgram (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:214896)
    at f.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:208515)
    at Object.getProgram (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:255275)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:507122)
    at t (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:506861)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:507018)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:506274)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:504451)
    at l.value (https://js.api.here.com/v3/3.1/mapsjs-core.js:377:504035)

I'm not sure of the best way to report this, hence posting here. Happy to raise as a proper issue if someone provides me with the way to do so.

EDIT Having looked into this error message with MapBox one cause is too many browser tabs open running WebGL but this occurs with only a single tab open

Solution

  • After improvements of JS API the issue "WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost" is not reproducible any more.