Проблема с перерисованием предварительного просмотра Chrome

В настоящее время проблема с несколькими нашими сайтами при использовании предварительного просмотра Google Chrome. Эта проблема прерывистая, когда она не отображает весь контент для предварительного просмотра. Проблема также возникает при печати. ​​

Кажется, что это какой-то тип проблемы перерисовки. Я имею в виду, что, хотя при предварительном загрузке предварительного просмотра отсутствует содержимое, я могу исправить его, выбрав или не выбрав некоторые параметры печати. Похоже, он заставляет окно предварительного просмотра перезагружаться, и тогда все в порядке.

Это, конечно же, не является решением для наших пользователей.

Я использую chrome 46.0.2490.80 м для Windows 10. Другой коллега испытывает ту же проблему на отдельном сайте, используя ту же версию Chrome в Windows 8.

Кто-нибудь еще испытывает эту проблему? У кого-нибудь есть проблема?

Дополнительная информация

• Наша таблица стилей печати отделена от основной таблицы стилей и индивидуально связана с документом
• Мы используем bootstrap, который имеет некоторые стили печати своих собственных
• Эмуляция печати Chrome не имеет этой проблемы, она локализована для предварительного просмотра печати. ​​

Спасибо заранее.

EDIT: Меня попросили предоставить таблицу стилей печати. Я хотел бы повторить, что этот вопрос не локализуется ни на одном веб-сайте или в среде. Единственным общим знаменателем является Google 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;}

Ответы

Ответ 1

В прошлом я видел, что предварительный просмотр в Chrome имеет проблемы при работе с элементами в таблицах стилей, которые медленно обрабатываются. Худшим является импорт @font для веб-шрифтов, рекомендованный для замены в печатных или предварительных таблицах стилей со стандартными шрифтами. Хотя они не отображаются в вашей таблице стилей выше (спасибо за добавление этого, кстати), селектора * и ^, которые у вас есть в css, вызывают предупреждения для медленной работы и их следует избегать в любом случае. Я использую CSS Lint для проверки, не уверен, насколько это помогает, но может стоить начать с базового css, чтобы проверить, что происходит, а затем построить оттуда.

Ответ 2

Может быть проблема аппаратного ускорения, как указано на этом веб-сайте http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

Мы прошли через все элементы, которые имели переполнение: scroll; и добавил -webkit-transform: translate3d (0,0,0); для ускорения аппаратного ускорения этих элементов.

Также может быть аналогичная проблема этого > Части пользовательского интерфейса продолжают исчезать в приложении Chrome