Puppeteer + Leaflet JS with Apple MapKit PDF Creation Issues

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