[Bug Report] Broken columns when printing a page with Chrome/Puppeteer

Environment

Vuetify Version: 2.4.0 Vue Version: 2.6.12 Browsers: Chrome 87.0.4280.88 OS: Linux x86_64

Steps to reproduce

• Launch the app locally or use “Debug mode” in Codepen
• Print the page with Chromium/Puppeteer
• The 8+4 column width is broken and, instead, a 12+12 width is displayed

Expected Behavior

The printed columns should keep the 8-4 width, just like when displayed in the browser.

Actual Behavior

The printed columns use a 12+12 width (one is displayed above the other with full width).

Reproduction Link

https://codepen.io/PequeX/pen/LYReqXM

Other comments

Code to reproduce with Puppeteer in case a copy of Chromium is not available:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(
    'http://localhost:8081/#/',
    { waitUntil: 'networkidle2' },
  );
  await page.emulateMediaType('print');
  await page.pdf({ path: 'output.pdf', format: 'A4', printBackground: true});
  await browser.close();
})();

[KaelWD]

I think this should be regarded as browser quirks, if you want a consistent print layout it’s probably a good idea to write your own stylesheet with @media print instead of relying on px breakpoints.

[KaelWD]

Viewport affects $vuetify.breakpoint, but css breakpoints are based on paper size. It is pretty inconsistent though, toggling between A4 and A3 will randomly render as 12+12, 8+8, or 8+4.