Why is there such a discrepancy between Chrome print CSS emulation and Print Preview?

Question

I have a Bootstrap 3-based site. Printing out certain pages is important to our customers. Most of the site prints acceptably, except for the modal dialogs.

I'm trying to use Chrome's (v42.0.2311.135 m) CSS print emulation to improve the print stylesheet. However, it looks nothing like Print Preview, or what actually comes out the printer.

I want the print version of the modals to cover the whole screen. Here's what I have so far:

---

Screen:

---

Print CSS emulation (looks good, modal takes up whole screen):

---

Print preview / actual hard copy (completely wrong - modal is small and I can see the rest of the page):

Here are the relevant bits of my print stylesheet:

@media print {
    * {
        -moz-transition: none !important;
        -o-transition: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }

    .modal-backdrop {
        background-color: white!important;
    }

    .modal.center .modal-dialog {
        width: 100%;
        max-width: 100%;
        height: 90%;

    }
}

---

How do I get the Print CSS emulation to resemble the actual printed output?

Answer 1

The css media: print in emulation is only for applying print css rules to the page, it does not account for all the other things that go along with print.

For instance, images and background colors do not print by default (which is why the main content is showing up, that bg-color:white is not applied). Other things can be issues, like absolute positioning. The only reliable way to test print is by actually printing, or at least printing to pdf.

It's also worth noting that there will be browser discrepancies in printing.