Question

目前，在使用Google Chrome打印预览时，我们的网站存在问题。此问题是间歇性的，它不会呈现预览的所有内容。打印时也存在问题。

好像是某种类型的重绘问题。我的意思是，虽然预览最初加载时缺少内容，但我可以通过选择或取消选择某些打印选项来修复它。看起来它强制预览窗口重新加载，然后就可以了。

这当然不是我们用户的真正解决方案。

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

还有其他人遇到此问题吗？有人有修复吗？

添加信息

我们的打印样式表与主样式表分开，并且单独链接到文档
我们正在使用bootstrap，它有一些'自己的
Chrome打印仿真没有此问题，它已本地化为打印预览。

提前致谢。

修改我被要求提供打印样式表。我想重申，此问题并未本地化为单个网站或环境。唯一的共同点是谷歌浏览器46.0.2490.80米。

无论如何，这是打印样式：

* {
    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开始检查会发生什么然后从那里建立起来是值得的。

Answer 2

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

我们浏览了所有溢出的元素：滚动;并补充说 -webkit-transform：translate3d（0,0,0）;强制对这些元素进行更好的硬件加速。

也可能是这个＆gt;的类似问题 Parts of the UI keep disappearing in a Chrome app

Chrome打印预览重绘问题

2 个答案: