Map tiles aren't rendering in headless chrome (via puppeteer)

[gka]

mapbox-gl-js version: latest

browser: Chromium headless on Ubuntu

Steps to Trigger Behavior

1. run this node script

const puppeteer = require('puppeteer');

puppeteer.launch({
  // headless: false,
})
.then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://get.webgl.org/');
  // await page.goto('https://datawrapper-stg.dwcdn.net/VQDGd/1/');

  await page.waitFor(3000);
  await page.screenshot({path: 'webgl.png'});

  await page.goto('https://api.mapbox.com/styles/v1/mapbox/outdoors-v9.html?title=true&access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA#10.9/40.7389/-73.9103');
  await page.waitFor(5000);
  await page.screenshot({path: 'mapboxgl.png'});

  await browser.close();
});

this script uses puppeteer to create two screenshots in headless chromium. the first is of https://get.webgl.org/ to confirm that webgl is enabled:

webgl.org screenshot in headless mode

the second is a screenshot of this live mapbox map demo from your website

mapboxgl screenshot in headless mode

If I run the same script with headless: false the second screenshot works just fine.

Link to Demonstration

the script above (just need to run npm i puppeteer first.

Expected Behavior

the expected behavior would be that the mapboxgl map renders as it does if I use the non-headless mode:

mapbox screenshot in non-headless mode

Actual Behavior

see first screenshot

[ryanhamley]

I can't reproduce this behavior with your test script. I'm seeing both screenshots rendered correctly with headless and non-headless Chromium. I used Puppeteer v1.11.0 and then rolled back to 1.5.0 since there were reports of issues rendering WebGL on some older versions, but again I couldn't replicate the behavior you're describing. I used Node 8.5 and 10.13 for what it's worth.

[andrewharvey]

From experience here are some things that have made a difference to me:

• try preserveDrawingBuffer: true as a Map option
• try using external google-chrome instead of chromium

puppeteer.launch({
    executablePath: '/usr/bin/google-chrome',
})

• try using google-chrome-beta instead of google-chrome (I think it must have been an issue syncing versions of chrome with puppeteer)

puppeteer.launch({
    executablePath: '/usr/bin/google-chrome-beta',
})

I don't think this is an issue with Mapbox GL JS, it's a chromium issue.

[nanodan]

I have this same issue but only when trying to render local mapboxgl files. The fixes of switching to google-chrome didn't help.

[sdhoek]

Seems to be a puppeteer/chromium issue. While calling page.goto() you can pass the { waitUntil: 'networkIdle0'} parameter to make sure all the data has been loaded into Mapbox GL before taking a screenshot of the page.

[foundryspatial-duncan]

From experience here are some things that have made a difference to me:

• try preserveDrawingBuffer: true as a Map option

For anyone searching for solutions in 2020, I'll add that this is probably what you're looking for. No need to fiddle with unstable/beta versions of Chromium if you're using a recent build of Puppeteer.

I've experimented with this lately, and the tiles won't show up in the PDF (or screenshot) even if I add a long delay to allow for everything to definitely load. You can make Puppeteer wait for a promise to resolve on the target page, so if you resolve that promise when the map fires its idle event, then you can be sure the tiles are all fully loaded (hopefully!), and you can eliminate that as a possible cause. It makes sense that preserveDrawingBuffer is what makes it work.

[patrickbussmann]

I have all this things + promises for tilesloaded event of google maps and the maps still look like:

[gbuckingham89]

I'm seeing this issue when I try to render a PDF containing a mapbox-gl-js map on the latest release of Puppeteer (5.3.1) on Ubuntu server 18.04 LTS.

I've tried using the bundled Chromium version and latest releases of Chrome and Chrome Beta - all give the same result.

I've tried setting the preserveDrawingBuffer option on the Mapbox map.

If I set dumpio: true when launching Puppeteer, I do see this error message:

[1019/145021.772786:ERROR:command_buffer_proxy_impl.cc(122)] ContextResult::kTransientFailure: Failed to send GpuChannelMsg_CreateCommandBuffer.

There appears to be an issue on the Chromium bug tracker for a WebGL issue in headless mode: https://bugs.chromium.org/p/chromium/issues/detail?id=809065&q=mapbox&can=2

[leonardoviada]

Same problem here, any update?

[miguelfrmn]

I fixed this by adding the --use-angle flag as recommended here: https://groups.google.com/a/chromium.org/g/chromium-dev/c/8eR2GctzGuw/m/seHvu1jTAAAJ
This is in Mac with Apple Silicon.