Difference between DevTools "Toggle print media simulation" and actual print (preview or pdf) output

Developer Tools
#1

Not sure how best to provide a working code sample, but we have our internal documentation site with procedures which need to “look good” as a page, and as an exported (“printed”) pdf. The site is using Bootstrap, which comes with a few @media print directives, which most are easy enough to override if needed, but for some reason the table background property is displaying in color (our preferred way) in the print media simulation but transparent (the bootstrap way) in the actual print preview and PDF output.

Here are the relevant styles as shown in the Developer Tools:

background
background401×585 20.7 KB

Here is the output as it appears in the Firefox tab:
color

And here is the output as it appears in the printed PDF (and the preview looks the same):
bw

It’s like the !important stuff is not applied correctly in the printing process. Is this a know issue in FF, or something I can fix somehow on my side? What is going on?

#2

It seems that the rules of precedence would favor the more specific rule (what you see in emulation), but hmm…

Is the background color missing only from those <th> elements, it is normal everywhere else?

#3

Nope, this is a representative example of all tables everywhere, they behave exactly like this. Background color is shown correctly in print media simulation (in DevTools) but not in actual PDF / Print Preview. Only <td> and <th> elements have background colors defined, but the later !important from my local sites.css stylesheet is ignored in PDF / Print Preview.

#4

I’m not sure I understand everything here.
So I tried with this simple page:

data:text/html,<meta charset=utf8><style>th { background-color: tomato; } @media print { * { background: transparent !important; } }</style><table><thead><tr><th>Test</th></tr></thead></table>

The background is red by default
If I open DevTools and enable print simulation, the background turns transparent
If I print to a PDF, the background is still transparent

Would you mind testing that case and telling me if you’re getting the same?

Could you put up a codePen or something that would demonstrate your issue if this simple case does not highlight what you mean?

#5

I can reproduce this with this minimal code example on codePen:

I put the “steps to reproduce” in a comment there, but also here:

To Reproduce:

  • Difference is most clear if you view the “output” of this CodePen in a new tab, by itself.
  • To do this (in FireFox), right click the table (e.g. the Document Owner column header) and choose “This Frame > Open Frame in New Tab”
  • (I don’t know exactly how CodePen works, but sometimes the new window shows only “Not Found”. Keep trying, untill you can see the content in the new tab, refreshing the orignila CodePen seems to work, sometimes…)
  • (You can see this without opening a new tab with just the output, it’s just more busy in the print preview).
  • Then in the new tab, open developer tools.
  • Click “Toggle print media simulation for the page”.
  • Notice how just the link color changes to black, the background color should remain for the Table header and the Table row.
  • Now, click Print (or Ctrl-P)
  • In the Print preview that opens, the background colors are removed, which is not the same as in the print simulation mode.

I could add screenshots, but honestly they would be exactly the same as the output example screenshots I posted in the OP.

ETA: I tried moving the order of the CSS definitions, so that the @media print { stuff would be before/after the other stuff, but it seems to have no difference.

#6

Thanks for the example
I think I found what the issue is
Could you check the “Print backgrounds” checkbox in the print preview?

CleanShot 2021-11-05 at 15.15.18
CleanShot 2021-11-05 at 15.15.181950×1522 180 KB

When it’s unchecked, the table background isn’t printed for me

1 Like
#7

Ok, yes, that prints better