Chrome: Print preview differs from simulate CSS media print

Question

I am having an issue when I print my page in Chrome 26 where tables appear with grey background colour.

When I view the page in chrome with simulated CSS media print it looks fine

When printing in Safari everything works fine. Anyone knows how to fix this issue?

Ilene

You are defining that there should be no grey background in the Print Media declaration, right? – Pyrology

Can we see some CSS code? – Acidity

Thanks for the quick reply. I am using bootstrap css as is, with no mods. I am not explicitly declaring no grey background. Do I have to do this? I tried background-color:blue; but the table still appears grey in the print preview – Ilene

I have the same issue with margins. FF and IE print correctly. chrome emulation also. but chrome print output differs. – Combination

Answer 1

Here is the solution: Add this to your print css

* {transition: none !important}

See: https://nicolasbouliane.com/blog/print-preview-significantly-different-inspector-chrome

Combination

Answer 2

You can try -webkit-print-color-adjust:exact;, which overrides the setting where Chrome removes background colors. This could fix your problem.

Candice

Doesn't seem to solve the issue unfortunately. I am still very confused why the print preview differs from the 'simulate CSS media print' setting. Shouldn't these be the same? – Ilene