CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgoogle-chrome
Craig Barben
Craig Barben

Reputation: 148

Chrome print preview redraw issue

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

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;}

Upvotes: 13

Views: 2746

Answers (2)

cweitat
cweitat

Reputation: 1247

Could be hardware acceleration issue as stated on this website http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

We went through all elements that had overflow: scroll; and added -webkit-transform: translate3d(0,0,0); to force better hardware acceleration on those elements.

Could also be similar problem of this > Parts of the UI keep disappearing in a Chrome app

Upvotes: 1

AndW99
AndW99

Reputation: 552

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.

Upvotes: 3

Related Questions