Maplibre GL Layers Not Printing in Firefox

[sheeley820]

maplibre-gl-js version: 3.3.1

browser: Firefox

Steps to Trigger Behavior

1. Go to the MapLibre GL JS Documentation
2. Attempt to print the page in Firefox
3. Notice that tags appear on the print preview, but not the map tiles themselves. It is simply a grey background.

Link to Demonstration

A thorough test was done by @gavin-maps from the esri-leaflet-vector project. The results can be seen here.

The same behavior can be seen on the MapLibre GL JS Documentation. Printing in Chrome / Safari / Brave works, but not Firefox. I do not notice this same behavior with other instances of canvas elements, so I do not believe the issue is directly with the element type.

I believe there is some issue within Firefox which distinguishes it from the other browsers, but perhaps there is something within the MapLibre GL JS project which can also be changed to accommodate Firefox.

Expected Behavior

Printing a page with a MapLibre GL rendered map will be successful.

Actual Behavior

Printing a page with a MapLibre GL rendered map shows up as a grey background.

[HarelM]

Can you try and print the webgl test page with Firefox compared to other browsers?
https://get.webgl.org/
My guess would be webgl support in printing, much like the fact that android simulator doesn't support webgl in the browser..

[sheeley820]

Chrome does print the WebGL element:

Firefox does not print the WebGL element:

This appears to be a known issue in Firefox as recorded here. However, in that discussion a comment is made that setting preserveDrawingBuffer: true fixes the issue. Because this value is set as false by default in map.ts and is not set in the esri-leaflet-vector implementation of maplibre-gl-js it remains false. So I rebuilt it with preserveDrawingBuffer: true and...

Thank you for your assistance in tracking this down. Would it be appropriate to add a note about this somewhere in the README?

[gavinr-maps]

Possibly related or the same issue: webcompat/web-bugs#111887

[HarelM]

I'm not sure where you would place that info, maybe in the comments of the preserveDrawingBuffer field in the code, otherwise I'm not sure where I would place it.
I had a site that allowed printing in the past, I can safely say that this is no longer a requirement as I think less and less people are actually printing - it's easier to take a screen shot...
In any case, feel free to submit a PR.

[sheeley820]

@HarelM Let me know if you would like me to create a PR to add a comment somewhere, but because I am only using maplibre-gl-js tangentially through esri-leaflet-vector I ended up creating a PR there which resolves the issue for me.

Thanks for the assistance.

[HarelM]

Feel free to open a PR here, I'm not sure where I'd put this info though...

[HarelM]

Closing this issue, if anyone would like to open a PR to improve the docs, feel free to do so.