Chrome Print Preview Doesn't Load @Media Only Print Font-Face

Chrome Print Preview doesn't load @media only print font-face

There is a issue for this here
https://bugs.chromium.org/p/chromium/issues/detail?id=284840

For now you need to sure there is printed font rendered before using print and you render at least 1 character from every language group you want to print:

• Cyrillic (Supported by Open Sans)
• Cyrillic Extended (Supported by Open Sans)
• Greek (Supported by Open Sans)
• Greek Extended (Supported by Open Sans)
• Latin (Supported by all Fonts)
• Latin Extended (Supported by Open Sans)
• Vietnamese (Supported by Open Sans)

For now I add characters from Latin extended

<div class="chrome-font-fix">sš<b>sš</b><i>sš</i></div>

with invisible style

.chrome-font-fix {
    position: absolute;
    visibility: hidden;
}

Chrome Not Printing Correctly On First Print When Using Open Sans Font

Ended up just changing the styles used. Instead of using display: none I'm now using the following:

.my-hide {
  display: block !important;
  height: 0px;
  overflow: hidden;
}
@media print {
  .my-hide {
    height: auto;
  }
}

For some reason these CSS rules get processed in time while the others don't.

Chrome print preview error

Finally i found the error. 2 css rules have blocked the browser from generating the preview:

min-height: 100%;
height: 100%;

and

position: fixed;

Chrome print preview redraw issue

In the past I have seen that Chrome print preview having issues when operating with items in stylesheets that are slow to process. The worst being @font import for web-fonts, recommended to be replaced in print or preview stylesheets with the standard fonts. Whilst these do not appear in your stylesheet above (thank you for adding this by the way), the * and ^ selectors you have in the css do trigger warnings for being slow and should be avoided anyway. I use CSS Lint for checking, not sure how much this helps, but it could be worth starting from a basic css to check what happens and then build up from there.

---

Related Topics