Chrome打印预览重绘问题

13

我们的一些网站在使用Google Chrome打印预览时出现问题。这个问题是间歇性的,有时候预览不会渲染所有内容。打印时也存在这个问题。

看起来这是一种重绘问题。我的意思是,尽管当预览最初加载时缺少一些内容,但我可以通过选择或取消选择一些打印选项来解决它。它看起来强制预览窗口重新加载,然后就好了。

当然,这对我们的用户来说并不是真正的解决方案。

我正在使用Windows 10上的chrome 46.0.2490.80 m。另一位同事在使用Windows 8上相同版本的Chrome时遇到了同样的问题。

还有其他人遇到这个问题吗?有人有解决方法吗?

附加信息

  • 我们的打印样式表与主样式表分开,并单独链接到文档
  • 我们正在使用Bootstrap,它有一些自己的打印样式
  • Chrome打印仿真没有这个问题,它只存在于打印预览中。

提前感谢。

编辑: 我被要求提供打印样式表。我想重申,这个问题不是局限于单个网站或环境的。唯一的共同点是Google Chrome 46.0.2490.80 m。

无论如何,以下是打印样式:

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

1
你能分享/添加你的打印样式表到问题中吗?这将有助于识别问题。谢谢。 - AndW99
打印样式已添加到问题中。 - Craig Barben
我们的打印样式表与主样式表分开,并且单独链接到文档。 - Craig Barben
不行,我已经说过问题是间歇性的。如果我能够重现这个问题,我可能会自己找出问题所在。 - Craig Barben
我认为一张前后对比的截图可能比你目前的样式表更具信息性。 - DoctorDestructo
显示剩余3条评论
2个回答

3
过去我曾看到Chrome打印预览在处理样式表中的项目时出现问题,特别是处理@font导入Web字体时最为严重。建议在打印或预览样式表中使用标准字体来代替它们。虽然这些内容在你上面的样式表中没有出现(顺便感谢你添加这个样式表),但你在CSS中使用的*和^选择器会触发警告,因为它们很慢,应该避免使用。我使用CSS Lint进行检查,不确定它有多大帮助,但从基本的CSS开始检查然后逐步构建可能是值得的。

1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接