Perché esiste una discrepanza tra l'emulazione CSS di stampa e l'anteprima di stampa di Chrome?

Question

Ho un sito basato su Bootstrap 3. La stampa di determinate pagine è importante per i nostri clienti. La maggior parte delle stampe del sito è accettabile, ad eccezione delle finestre di dialogo modali.

Sto tentando di utilizzare l'emulazione di stampa CSS di Chrome (v42.0.2311.135 m) per migliorare il foglio di stampa. Tuttavia, non assomiglia all'anteprima di stampa, né a ciò che effettivamente esce dalla stampante.

Desidero che la versione di stampa dei modali copra l'intero schermo. Ecco quello che ho finora:

---

schermo:

---

emulazione di stampa CSS (sembra buono, modal riprende tutto lo schermo):

---

Stampa anteprima/effettivo cartaceo (completamente sbagliato - modale è piccola e posso vedere il resto della pagina):

Ecco i bit rilevanti del mio foglio di stile di stampa :

@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%; 

    } 
} 

---

Come faccio ad avere esimo e Stampa l'emulazione CSS per assomigliare all'output stampato effettivo?

Answer 1

Il supporto css: stampa in emulazione serve solo per applicare le regole di stampa CSS alla pagina, non tiene conto di tutte le altre cose che accompagnano la stampa.

Ad esempio, le immagini e i colori di sfondo non vengono stampati per impostazione predefinita (motivo per cui il contenuto principale viene visualizzato, che bg-color: bianco non viene applicato). Altre cose possono essere problemi, come il posizionamento assoluto. L'unico modo affidabile per testare la stampa è in realtà la stampa, o almeno la stampa in pdf.

Vale anche la pena notare che ci saranno discrepanze nel browser nella stampa.