Mapbox-gl-js: print not working in safari

[trallarn]

mapbox-gl-js version:
0.34.0

Steps to Trigger Behavior

1. Open Safari 10.0.3
2. Goto https://www.mapbox.com/mapbox-gl-js/examples/
3. Interact with the map eg. click in it
4. Print the map

Expected Behavior

The printed page should contain the map

Actual Behavior

The printed page is blank

Note that when clicking outside the map and then printing, the map prints ok.

[mourner]

This seems like a Safari bug to me. Do you think there's anything we can do about it on the Mapbox GL JS side?

[Scarysize]

Have you tried it with the preserveDrawingBuffer option you can pass to the map? We had some issues with that. Related to exporting the canvas to an image though.

[1ec5]

GL JS doesn’t support printing the map in any browser, correct? The only difference here is that the reproduction steps have you focus the map, which is all alone in an iframe, and Safari prints the focused iframe by default.

[jfirebaugh]

GL JS doesn’t support printing the map in any browser, correct?

Printing works fine in Chrome in my tests.

[1ec5]

Ah, my bad – here’s what I’m seeing on various browsers (all on the Mac):

Browser | Printout before clicking on iframe | Printout after clicking on iframe
----|----|----
Chrome 56.0.2924.87 | Whole page including map | Whole page including map
Firefox 54.0a2 (2017-03-26) | Whole page except blank map | Whole page except blank map
Safari 10.0.3 (12602.4.8) | Whole page including map | Blank map (but attribution visible)

This is what Firefox’s printout looks like:

This is what Safari’s printout looks like after clicking on the iframe:

[trallarn]

I've tried setting preserveDrawingBuffer to true and lo and behold, printing the map works in safari. I do worry about the performance impact though. I will have to test for a bit.

[trallarn]

preserveDrawingBuffer=true enables printing in firefox 52.0.1 too.

[Scarysize]

We have this set on true by default and aren't experiencing any significant performance issues. Great it worked out for you!

[trallarn]

Thank you for all your help! Glad we found a solution.

[timstallmann]

I'm seeing this currently on https://compass.durhamnc.gov/#print/VCODE/blockgroup/ and have zero clue about what might be causing it. Console log doesn't show anything and when I use Safari Devtools to emulate print mode the map shows up fine as well. Also, after I print the map from Safari, the map will subsequently go blank in the browser.

Just leaving a little trail here in case anyone else runs into the issue and can provide a clue! This is using Vue and MapboxGL v0.54.0