Rendering Mapbox crashes Chrome in Android 10 (29)

DavidZiemann commented 5 years ago

mapbox-gl-js version: 1.3.1

browser: Chrome OS

Steps to Trigger Behavior

run android emulator (or any android device running API 29)
go to https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
Page will lock up and eventually crash

Link to Demonstration

[]() Android API 29 Behavior

Expected Behavior

Application does not crash when loading up map

Actual Behavior

Application crashes. This behavior is isolated to Android 10 (API 29). If I use the same emulator running Android 9 (API 28) the page renders correctly.

mourner commented 5 years ago

Does it only crash in the emulator, while the real browser on device is fine? Can you try different versions to see if any specific one is affected or all of them?

DavidZiemann commented 5 years ago

@mourner great questions. I will update the issue with more context.

I first ran into this issue when trying to create an android app using Cordova. Because there are no full featured Cordova plugins, I used the js implementation. This implementation works for every version of iOS I tried (both emulators and devices), but crashed every android emulator and device I tried.

Opening up the map example issue above only crashes emulators, but does not seem to crash on the device. Using the example in my cordova app actually crashes the application (both emulator and device) on android. These steps can be reproduced by creating a new cordova app, and then adding the example snippet from the link listed above. Once the map attempts to render, it hangs on loading the styles and eventually crashes.

kkaefer commented 5 years ago

@DavidZiemann I've been trying to reproduce this. Chromium hangs for me on this page as well in the Android emulator on Android 10. At some point Chromium realizes that it hangs and offers to close the tab, but it doesn't actually crash. I can still connect from Desktop Chrome, and JavaScript still executes. However, Chrome's compositor doesn't seem to work anymore and anything UI related hangs completely. Are you observing the same behavior?

kkaefer commented 5 years ago

I've tried a few other sites that use WebGL, e.g. https://webglsamples.org/lots-o-objects/lots-o-objects-draw-elements.html and https://testdrive-archive.azurewebsites.net/graphics/webglstresstest/. They all failed in the emulator, but worked on my actual device (running Android 10). When switching the emulator to use software-emulated OpenGL, it does render (it's just very slow, because software rendering is very slow).

Do you have an example app that crashes on an actual device? Historically, the Android emulator has been pretty unstable and spotty in terms of OpenGL support.

DavidZiemann commented 5 years ago

@kkaefer yea, if you generate a simple cordova app using the following steps, it hangs when the map is loaded.

Create Cordova App

cordova create hello com.example.hello HelloWorld
cd hello
cordova platform add ios
cordova platform add android

Add Mapbox to `index.html`

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="
            default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
            worker-src blob: https://*.tiles.mapbox.com;
            child-src blob: ;
            img-src data: blob: ;
            style-src 'self' 'unsafe-inline' https://*.tiles.mapbox.com https://api.mapbox.com;
            script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.tiles.mapbox.com https://api.mapbox.com;
            connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com;
        ">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
        <title>Hello World</title>

        <style>
            body { margin:0; padding:0; }
            #map { position:absolute; top:0; bottom:0; width:100%; }
            </style>
    </head>
    <body>
        <div class="app">
            <div id='map'></div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
        <script type="text/javascript" src="js/index.js"></script>

        <script>
           mapboxgl.accessToken = '<your access token here>';
           var map = new mapboxgl.Map({
               container: 'map', // container id
               style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
               center: [-74.50, 40], // starting position [lng, lat]
               zoom: 9 // starting zoom
           });
        </script>
    </body>
</html>

Run application

cordova emulate ios
cordova emulate android

If I run the app in iOS (either the emulator or on the device), the map loads perfectly. Running the same app in Android(either the emulator or on the device), the map hangs on loading and the app asks to close eventually.

kkaefer commented 4 years ago

I can reproduce the Emulator hang, however, I can't reproduce the hang or crash on a real device. I'm using a Google Pixel XL updated to Android 10 and ran your Cordova example. It works fine and the map is interactive. If you have any further hints as to how to reproduce this issue, please reopen.

jwoodwardtfx commented 4 years ago

We have a few Samsung A7 (2018) devices which have recently (in the last week) updated to Android 10 (from Android 9).

We have a custom web app using MapBox which displays a detailed map (built on the Android WebView component). If the map is left on screen for a long period of time (several hours) the map vanishes and we get an error reported when we attach the Chrome Debugger: "CONTEXT_LOST_WEBGL: loseContext: context lost"

At this point if we try to destroy and recreate the map we get an error saying WebGL cannot be initialised.

If we try and get a working WebGL context we get NULL returned, i.e.: var tempcanvas = document.createElement('canvas'); tempcanvas.getContext('webgl');

So it looks like WebGL has "died" for the WebView page. If we reload the page it springs back in to life.

This problem was never seen on the same device on Android 9.

Any ideas or pointers where to look for an issue? We've tried the same app on various other phones running Android 10 and as of yet have not hit the same problem. With a Samsung A7 (2018) running Android 10 it is repeatable (and has occurred on several phones).

mapbox / mapbox-gl-js