html - 클라우드 - 크롬 인쇄 미리 보기 다시 그리기 문제



구글 캘린더 인쇄 (2)

현재 Google 크롬 인쇄 미리보기를 사용할 때 몇 가지 사이트에 문제가 있습니다. 이 문제는 간헐적으로 발생하며 미리보기 용으로 모든 콘텐츠를 렌더링하지 않습니다. 이 문제는 인쇄 할 때도 나타납니다.

그것은 문제를 다시 그리는 어떤 유형의 것처럼 보입니다. 미리보기를 처음로드 할 때 콘텐츠가 누락 되어도 일부 인쇄 옵션을 선택하거나 선택 취소하여 수정할 수 있습니다. 미리보기 창을 강제로 다시 불러 와서 모두 괜찮은 것 같습니다.

이것은 물론 사용자를위한 솔루션이 아닙니다.

Windows 10에서 크롬 46.0.2490.80 m을 사용하고 있습니다. 다른 동료가 Windows 8에서 동일한 버전의 Chrome을 사용하여 동일한 사이트에서 동일한 문제를 겪고 있습니다.

다른 사람이이 문제를 겪고 있습니까? 누구든지 고칠 수 있습니까?

추가 정보

  • 우리의 인쇄 스타일 시트는 주요 스타일 시트와 별개이며 문서에 개별적으로 링크되어 있습니다.
  • 우리는 부트 스트랩을 사용하고 있습니다.
  • Chrome 인쇄 에뮬레이션에이 문제가 없으며 인쇄 미리보기에 현지화되어 있습니다.

미리 감사드립니다.

편집 : 나는 인쇄 스타일 시트를 제공하도록 요청 받았습니다. 이 문제가 단일 웹 사이트 또는 환경에 국한되어 있지 않다는 점을 다시 한 번 강조하고자합니다. 유일한 공통 분모는 Google 크롬 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;}

https://src-bin.com


Answer #1

과거에는 처리 속도가 느린 스타일 시트 항목을 사용하여 작업 할 때 Chrome 인쇄 미리보기에 문제가있는 것을 보았습니다. 최악의 경우 웹 폰트를 가져올 수 없으므로 인쇄 또는 미리보기 스타일 시트를 표준 글꼴로 대체하는 것이 좋습니다. 위의 스타일 시트에 이러한 것들이 나타나지는 않지만 (덧붙여서 고맙습니다.) css에있는 *와 ^ 셀렉터는 느려지므로 경고를 표시하고 어쨌든 피해야합니다. CSS 린트 (lint) 를 사용하여 확인하는데 도움이되는지는 모르겠지만 기본적인 CSS에서 시작하여 무슨 일이 일어나는지 확인한 다음 거기에서 빌드하는 것이 좋습니다.






google-chrome