www.theaa.com - print preview is blank

[webcompat-bot]

URL: https://www.theaa.com/route-planner/route(modal:print-preview)?from=Haslingden,%20Rossendale,%20UK&to=Chorley,%20UK

Browser / Version: Firefox 109.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: AA Route Planner shows result on screen but all "Print" commands (save/print to PDF, Fax, One Note etc.) produce only one blank page. I have had the same problem with SOME Daily Telegraph prints (but not many). Using Chrome to do the same job works perfectly.
Steps to Reproduce:
I used Google to search for AA Planner and then went to the AA route planner page. I selected one of the three alternative routes and clicked the "Print" button which took me to a screen showing the map and the route. This screen had another "Print" button but clicking on this to "print" it (save to PDF) produced only a blank page in "Preview" and when I saved the document.

View the screenshot

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[sv-calin]

Thank you for reporting this issue, I was able to reproduce it.

Tested on:
• Browser / Version: Firefox Nightly 111.0a1 (2023-02-07) / Firefox Release 109.0.1 / Chrome 109.0.5414.75
• Operating System: Windows 10

Notes:

1. Reproducible on both Firefox Release and Nightly
2. Not reproducible on Chrome

Moving to Needsdiagnosis.

[qa_06/2023]

[wisniewskit]

I figured this out by taking a "snapshot" of the page using Testcase Reducer, then manually removing CSS until I found it. For some reason, their page is adding this CSS using script:

@media print {
   @page { size: 16px; }
}

It's in this bit:

      var Qx = Wl({
        encapsulation: 2,
        styles: [
          ['/* snip a ton of CSS */@page{size:16px}/* more snip snip*/']
        ],
        data: {
        }
      });

If I drop that CSS rule in the style editor, the print preview works. But oddly, Testcase Reducer is also finding this bit of CSS, which appears earlier in the CSS, and so is overridden:

@media print {
    @page { size: a3; }
}

Either way, I have no idea why they would apply a size of 16px, but the same stylesheet also seems to be being added by Chrome. Indeed, a simple local test-case confirms that it is a webcompat issue, where Chrome seems to just ignore @page sizes that are ridiculously small. I've filed bz1838732 to see how this is best resolved, but we can resolve this with a simple site intervention as well:

@media print {
    @page { size: a3 !important; }
}

[wisniewskit]

Note that it would be good to figure out which Daily Telegraph print-outs the reporter of this bug is discussing, so we can see if it's the same issue, so if anyone can point us to such a page, please do!

[ksy36]

Shipped an intervention in https://bugzilla.mozilla.org/show_bug.cgi?id=1848849