Chrome 打印预览重绘问题答案

【问题标题】：Chrome print preview redraw issueChrome 打印预览重绘问题
【发布时间】：2016-02-01 20:10:04
【问题描述】：

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

【问题讨论】：

您可以分享/添加您的打印样式表到问题中吗？这将有助于确定问题。谢谢
打印样式已添加到问题中
如何将打印样式添加到页面？您是使用 @media print 设置还是使用单独的 css 仅打印文件 ()？
我们的打印样式表独立于主样式表，并单独链接到文档
嗯，如果无法重现该问题，不知道如何提供帮助。无论如何，您可以设置一个 js.fiddle 来展示打印问题，以便我们了解发生了什么？

标签： html css twitter-bootstrap google-chrome

【解决方案1】：

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

【讨论】：

【解决方案2】：

可能是本网站所述的硬件加速问题 http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

我们检查了所有溢出的元素：滚动；并添加 -webkit-transform: translate3d(0,0,0);强制对这些元素进行更好的硬件加速。

也可能是类似的问题> Parts of the UI keep disappearing in a Chrome app

【讨论】：