html - Chrome 打印预览重绘问题

Question

目前我们的几个网站在使用 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;}

Answer 1

过去，我发现 Chrome 打印预览在处理处理缓慢的样式表中的元素时会出现问题。最糟糕的是用于网络字体的@font 导入，建议在打印或预览样式表中将其替换为标准字体。虽然这些没有出现在您上面的样式表中(感谢您顺便添加它)，但您在 css 中拥有的 * 和 ^ 选择器确实会触发速度慢的警告，无论如何都应该避免。我用 CSS Lint用于检查，不确定这有多大帮助，但从基本的 css 开始检查发生了什么，然后从那里开始构建可能是值得的。