Print preview not the same as print emulation in Chrome

Question

Why print preview (cmd + p) isn't the same as media print emulation with console on Chrome (37 Mac OS X) ?

Print preview :

Media print emulation :

I'm working with Drupal 7 and my css config theme.info print doesn't override block width on the page however I set :

stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css

But other parts are well overridden. Someone knows why ?

Answer 1

The print preview will display your page before CSS transitions are applied, so if there’s a transition when some elements are moved, print preview will show them before that transition. This is especially tricky if you use CSS transitions for columns, responsive design, slide out menus etc.

So to fix it in your print style sheet, you need to add the following style:

@media print {
  *{  transition: none !important }
}

if above solution not worked for you then the cause of it may be chrome, Chrome doesn't disable the transition property for print media. in Chrome DEVTools print option in emulation css media is only for applying print css rules to the page, for testing purpose, it does not account for all the other things that go along with print, it display the print preview but sometimes it do not display the print page as actual print preview.

And different browser behaves differently in printing the page.The only optimal way to test print is by actually printing, or printing to pdf.

if you are using bootstrap then if you are using only col-md-* or col-sm-* it will not work, but if you use col-xs-* then it will work because The issue is that the page itself is small in terms of pixels, so bootstrap thinks it needs to apply the xs style.