地图无法在 OnePlus 5T 上加载 Chrome

Question

我正在使用 Here JavaScript 网络 SDK，在 BrowserStack 上的每个设备和浏览器组合上一切正常。但是，在物理 OnePlus 5T 设备上运行 Chrome 77.0.3865.116 地图无法加载，控制台中的堆栈跟踪如下。

我看到的是显示了包含地图控件的地图容器，还简要显示了添加到地图的两个标记。然后屏幕似乎重新绘制，标记消失，留下一个只有 UI 控件的灰色空地图。

在同一台设备上运行 Firefox，没有任何问题。堆栈跟踪是：

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)

我不确定报告此问题的最佳方式，因此在此处发布。如果有人为我提供了这样做的方法，很高兴作为一个适当的问题提出。

编辑使用 MapBox 查看此错误消息后，一个原因是打开的浏览器选项卡过多运行 WebGL，但仅打开一个选项卡时会发生这种情况

Answer 1

改进 JS API 后问题 "WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost" 不再重现.

地图无法在 OnePlus 5T 上加载 Chrome

Map Fails to load on Chrome on OnePlus 5T

here-api