Chrome print preview redraw issue

Question

Currently having an issue with a couple of our sites when using the Google Chrome print preview. This issue is intermittent, where it doesn't render all of the content for the preview. The issue is present when printing as well.

It seems as though it's some type of redrawing issue. What I mean by this is although when the preview initially loads it is missing content, I can fix it by selecting or un-selecting some of the print options. It looks like it forces the preview window to reload and is then all fine.

This of course is not really a solution for our users.

I am using chrome 46.0.2490.80 m on Windows 10. Another colleague is experiencing the same issue on a separate site, using the same version of Chrome on Windows 8.

Is anyone else experiencing this issue? Does anyone have a fix?

Addition info

• Our print stylesheet is separate from the main stylesheet and is individually linked to the document
• We are using bootstrap, which has some print styles of its' own
• Chrome print emulation does not have this issue, it is localized to the print preview.

Thanks in advance.

EDIT: I have been asked to provide the print stylesheet. I would like to reiterate that this issue isn't localised to a single website or environment. The only common denominator is Google Chrome 46.0.2490.80 m.

Regardless, here are the print styles:

* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
}

a,
a:visited {
    text-decoration: underline;
}

a[href]:after {
    content: " (" attr(href) ")";
}

abbr[title]:after {
    content: " (" attr(title) ")";
}

/*
    * Don't show links for images, or javascript/internal links
    */

.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
    content: "";
}

pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
}

thead {
    display: table-header-group; /* h5bp.com/t */
}

tr,
img {
    page-break-inside: avoid;
}

img {
    max-width: 100% !important;
}

@page {
    margin: 0.5cm;
}

p,
h2,
h3 {
    orphans: 3;
    widows: 3;
}

h2,
h3 {
    page-break-after: avoid;
}

/*============================================================*\
        $Custom element removal
\*============================================================*/

#main-template,
.footer-cols,
.widget-promo,
.testimonials .column-sidebar,
.widget-range,
.tabs-nav,
.tabs-cnt,
.search-option,
.desktop-hidden,
.shopping-cart .sidebar,
.shopping-cart .legal {display: none;visibility: hidden;}

.widget-video,
.widget-gallery,
.testimonial {
    width: 50%;
    margin: 0 auto;
}

.single-image:after {
    content: ""!important;
}

.t-quote {
    border:none;
}

.retailers .map {height: 600px;}

.print-logo {display: block;visibility: visible;}

nav {display: none;}

.utilities p {
    position: absolute;
    left:0;
    top: 0;
}

.contact-us {display: none;}

Answer 1

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.