首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Chrome打印预览重绘问题

Chrome打印预览重绘问题
EN

Stack Overflow用户
提问于 2015-11-02 01:08:34
回答 2查看 2.3K关注 0票数 13

目前,在使用谷歌Chrome打印预览版时,我们的几个站点出现了问题。这个问题是断断续续的,它没有呈现预览的所有内容。印刷时也有这个问题。

这似乎是某种类型的重绘问题。我的意思是,虽然预览最初加载它是缺失的内容,我可以通过选择或取消选择一些打印选项来修复它。看起来它强制预览窗口重新加载,然后一切都好。

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

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

还有其他人经历过这个问题吗?有人有办法吗?

加法信息

  • 我们的打印样式表与主样式表是分开的,并分别链接到文档。
  • 我们使用的是引导,它有自己的一些打印样式。
  • Chrome打印仿真没有这个问题,它是本地化的打印预览。

提前谢谢。

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

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

代码语言:javascript
复制
* {
    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;}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-11-10 14:09:45

在过去,我曾见过Chrome打印预览在处理样式表中的项目时出现问题,而这些项目的处理速度很慢。最糟糕的是网页字体的@字体导入,建议在打印或预览样式表中用标准字体替换。虽然这些选项不会出现在上面的样式表中(顺便说一句,谢谢您添加了这个),但是css中的*和^选择器确实会触发慢速警告,无论如何都应该避免。我使用CSS Lint进行检查,不确定这有多大帮助,但从基本的css开始检查发生了什么,然后再从那里建立起来可能是值得的。

票数 3
EN

Stack Overflow用户

发布于 2015-11-09 03:46:11

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

我们遍历了所有具有溢出:滚动;和添加-webkit-转换:translate3d(0,0,0)的元素,以强制对这些元素进行更好的硬件加速。

也可能是这个> 部分用户界面在Chrome应用程序中不断消失的类似问题

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33469215

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档