Puppeteer + Leaflet JS with Apple MapKit PDF Creation Issues - leaflet

Question

I'm having issues properly exporting a PDF when using Apple MapKit tiles. It works fine with Google Maps or Bing tiles.
Expected output:
Actual output:
Notice the tiles zoomed incorrectly.
How to reproduce the issue:
Use the following curl command with a local Puppeteer server:
curl -X GET -G "http://localhost:8080" --data-urlencode "url=https://en.mycoursewalk.com/coursewalks/18624/print?print_pdf=true&unlisted_id=e61d9b86d7" --data-urlencode "page_orientation=Landscape" --data-urlencode "paper_size=Letter" --output "test.pdf"
You can access the page in your browser at: https://en.mycoursewalk.com/coursewalks/18624/print?unlisted_id=e61d9b86d7
package.json
{
"name": "chrome-puppeteer-pdf-export",
"version": "1.0.1",
"description": "",
"engines": {
"node": "12.22.6"
},
"main": "app.js",
"directories": {
"doc": "doc",
"lib": "lib",
"test": "test"
},
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "^4.17.1",
"valid-url": "^1.0.9",
"puppeteer": "10.4.0"
}
}
app.js
const express = require('express');
const app = express();
const puppeteer = require('puppeteer');
const port = process.env.PORT || 8080;
const validUrl = require('valid-url');
const parseUrl = function(url) {
url = decodeURIComponent(url);
if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
url = 'http://' + url;
}
return url;
};
app.get('/', function(req, res) {
const urlToScreenshot = parseUrl(req.query.url);
if (validUrl.isWebUri(urlToScreenshot)) {
console.log('Screenshotting: ' + urlToScreenshot);
const page_orientation = req.query.page_orientation;
const paper_size = req.query.paper_size;
(async() => {
let browser;
try {
browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
const page = await browser.newPage();
await page.emulateMediaType('print');
await page.setCacheEnabled(false);
await page.setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });
await page.goto(urlToScreenshot, { timeout: 30000, waitUntil: 'networkidle0' });
await page.waitFor(250);
await page.pdf({
format: paper_size,
landscape: (page_orientation === 'Landscape'),
margin: { top: 36, right: 36, bottom: 20, left: 36 },
printBackground: true
}).then(function(buffer) {
res.setHeader('Content-Disposition', 'attachment;filename="export.pdf"');
res.setHeader('Content-Type', 'application/pdf');
res.send(buffer)
});
} catch (err) {
console.log(err.message);
} finally {
if (browser) {
browser.close();
}
}
})();
} else {
res.send('Invalid url: ' + urlToScreenshot);
}
});
app.listen(port, function() {
console.log('App listening on port ' + port)
});
UPDATE
The problem is only happening for maps that end up on a fractional zoom level. I allow a zoom step of 0.25.
The problem only happens with the Apple MapKit tiles. It works fine with the Google Maps or Bing.
The expected output screenshot above is taken by printing to PDF from the Google Chrome browser. The map also displays correctly in the browser. The problem only happens when generating a PDF using Puppeteer