Chrome 打印预览重绘问题

Posted 2023-03-05

【中文标题】Chrome 打印预览重绘问题

【英文标题】：Chrome print preview redraw issue

【发布时间】：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 来展示打印问题，以便我们了解发生了什么？

【参考方案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