Блог

Главная - Вопросы по программированию - Chrome пытается напечатать простой html-документ как 31 КБ пустые страницы

Chrome пытается напечатать простой html-документ как 31 КБ пустые страницы

#html #css #google-chrome

#HTML #css #google-chrome

Вопрос:

У меня есть простой html-документ (см. — https://5fa3b1d135e99.htmlsave.net ). Когда я пытаюсь распечатать (cmd / ctrl P) этот документ, chrome оценивает размер печати как 31 776 страниц:

Chrome оценивает простую страницу в десятки тысяч страниц в режиме печати

После некоторых исследований, при удалении gap свойства из .block-row , оно исправлено, но я понятия не имею, в чем причина, плюс — мне нужен пробел.

Есть идеи?

В случае, если срок действия ссылки истек, это вывод:

 @import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@400;600;700');
@media print {
    * {
        -webkit-print-color-adjust: exact;
    }
    .block-row,
    .block-signature {
        break-inside: avoid;
    }
}
html,
body {
    margin: 0;
}
body {
    font-size: 10px;
    font-family: "Open Sans";
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
    margin: 0 24px 24px;
    width: 100%;
}
.page-header > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.page-header > div > .a-logo-container,
.page-header > div > .other-logo-container {
    flex: 1;
}
.page-header > div > .a-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-header .a-logo {
    display: block;
    width: 79px;
    height: 20px;
}
.page-header .other-logo-container {
    display: flex;
    align-items: center;
}
.page-header .other-logo {
    background: none no-repeat center center / contain;
    display: block;
    width: 40px;
    height: 20px;
}
.page-header .other-logo-container {
    gap: 8px;
}
.page-header .other-logo-container h2 {
    font-size: 10px;
}
.page-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 8px;
    font-weight: 400;
    width: 100%;
    margin: 0 24px;
    color: #999;
}
.block-box {
    padding: 16px 24px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin: 16px 0;
}
.block-box .block-column {
    gap: 10px;
}
.block-row {
    display: flex;
    gap: 32px;
}
.block-row > * {
    flex: 1;
}
.block-row > *   * {
    margin: 16px;
}
.block-column {
    display: flex;
    flex-direction: column;
}
.block-text,
.block-start-end-time {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.block-inline-key-value {
    display: flex;
    gap: 16px;
}
.block-inline-key-value > strong {
    font-weight: 600;
}
.block-inline-title {
    display: block;
    border-bottom: 2px solid;
    line-height: 25px;
    font-weight: 600;
}
.block-container .label {
    white-space: nowrap;
}
.block-title {
    background-color: #f9f9f9;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
}
.block-item {
    display: block;
    align-items: center;
}
.block-radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.block-radios .checkbox {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    border: 1px solid #c4c4c4;
    box-shadow: 0 0 0 1px #fff inset;
}
.block-radios .checkbox[data-checked="true"] {
    background-color: #292929;
}
.block-radios > .block-container {
    display: flex;
}
.block-radios > .block-container > * {
    width: 100%;
}
.block-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.block-checkboxes > .block-container {
    display: grid;
    flex-wrap: wrap;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.block-checkboxes .checkbox {
    width: 12px;
    height: 12px;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
}
.block-checkboxes .checkbox[data-checked="true"] {
    border-color: #292929;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABISURBVHgBfYzBDQAQEASvBCUoQUk6oRSlqIgSlgvigrPJfCaTJVIGwHcMfYKAsSylY46gLsfSTMGkKxBPEXt3cIRFDURoX74BA3ZgYkt9TZoAAAAASUVORK5CYII=) no-repeat center center #292929;
}
.block-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 100px;
}
.block-signature .signature-title {
    border-top: 2px solid;
    width: 100%;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
    max-width: 50vw;
}
.block-signature .signature-container > img {
    transform: translateY(50%);
    height: 80px;
}  
 <!DOCTYPE html>
<html>

<body>
  <section class="blocks">
      <div class="block-row">
          <div class="block-radios">
              <div class="block-inline-title">Radio</div>
              <div class="block-container">
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-title">Main Header</div>
      </div>
      <div class="block-row">
          <div class="block-radios">
              <div class="block-inline-title">Drop Down</div>
              <div class="block-container">
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-text">
              <div class="block-inline-title">Short Text</div>
              <div class="block-container">
                  <div class="block-item">lorem ipsum</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-text">
              <div class="block-inline-title">Number</div>
              <div class="block-container">
                  <div class="block-item">100</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-row">
              <div class="block-signature">
                  <div class="signature-container"><strong>Tracey Kutch</strong>
                  </div>
                  <div class="signature-title">Patient Name</div>
              </div>
              <div class="block-signature">
                  <div class="signature-container">None</div>
                  <div class="signature-title">Signature</div>
              </div>
              <div class="block-signature">
                  <div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
                  </div>
                  <div class="signature-title">Date</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-start-end-time">
              <div class="block-inline-title">Time</div>
              <div class="block-container">
                  <div class="block-item">Invalid Date</div>
              </div>
          </div>
      </div>
      </div>
      <div class="block-row">
          <div class="block-title">TODO Image @Newbie012</div>
      </div>
      <div class="block-row">
          <div class="block-title">TODO Chart @Newbie012</div>
      </div>
      <div class="block-row">
          <div class="block-row"></div>
      </div>
      <div class="block-row">
          <div class="block-checkboxes">
              <div class="block-inline-title">Multiple Select (check)</div>
              <div class="block-container">
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-radios">
              <div class="block-inline-title">Yes/No</div>
              <div class="block-container">
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-title">Sub Header</div>
      </div>
      <div class="block-row">
          <div class="block-text">
              <div class="block-inline-title">Long Text</div>
              <div class="block-container">
                  <div class="block-item">TypeScript supports JSX transpilation and code analysis. If you are unfamiliar with JSX here is an excerpt from the official website: JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended
                      to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
                      The motivation behind JSX is to allow users to write HTML like views in JavaScript so that you can: Have the view Type Checked by the same code that is going to check your JavaScript Have the view be aware of the context it is
                      going to operate under (i.e. strengthen the controller-view connection in traditional MVC). Reuse JavaScript patterns for HTML maintenance e.g. Array.prototype.map, ?:, switch etc instead of creating new (and probably poorly typed)
                      alternatives. This decreases the chances of errors and increases the maintainability of your user interfaces. The main consumer of JSX at this point is ReactJS from facebook. This is the usage of JSX that we will discuss here.</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-row">
              <div class="block-signature">
                  <div class="signature-container"><strong>Eliya Local</strong>
                  </div>
                  <div class="signature-title">Employee Name</div>
              </div>
              <div class="block-signature">
                  <div class="signature-container">None</div>
                  <div class="signature-title">Signature</div>
              </div>
              <div class="block-signature">
                  <div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
                  </div>
                  <div class="signature-title">Date</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-row">
              <div class="block-signature">
                  <div class="signature-container"><strong>Signature</strong>
                  </div>
                  <div class="signature-title">Patient Name</div>
              </div>
              <div class="block-signature">
                  <div class="signature-container">None</div>
                  <div class="signature-title">Signature</div>
              </div>
              <div class="block-signature">
                  <div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
                  </div>
                  <div class="signature-title">Date</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-text">
              <div class="block-inline-title">Date</div>
              <div class="block-container">
                  <div class="block-item">12/Sa/1996</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-start-end-time">
              <div class="block-inline-title">Time</div>
              <div class="block-container">
                  <div class="block-item">Invalid Date</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-text">
              <div class="block-inline-title">Add Free Text</div>
              <div class="block-container">
                  <div class="block-item"></div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-title">TODO Chart @Newbie012</div>
      </div>
      <div class="block-row">
          <div class="block-text">
              <div class="block-inline-title">Blood Pressure</div>
              <div class="block-container">
                  <div class="block-item">100 / 90</div>
              </div>
          </div>
      </div>
      <div class="block-row">
          <div class="block-row"></div>
      </div>
      <div class="block-row">
          <div class="block-row"></div>
      </div>
      <div class="block-row">
          <div class="block-row"></div>
      </div>
  </section>
</body>

</html>

Комментарии:

1. .block-row { display: flex; gap: 32px; } виновник, понятия не имею, почему… (в любом случае, вероятно, стоит сообщить об ошибке )

2. Да и нет. С интервалом что-то не так. Когда я попытался удалить пробел и заменить его полями, он по-прежнему ведет себя неправильно

3. По-видимому, вам нужно только column-gap (из-за быстрой визуальной проверки), и row-gap именно он вызывает эту ошибку, поэтому замените gap на column-gap , и все должно быть в порядке.

4. @Kaiido У меня есть дополнительные формы, которые нуждаются в row-gap (когда внутри a есть несколько дочерних block-row элементов). Поэтому необходимы оба из них.

5. Благословляю вас за то 31,776 , что вы задали этот вопрос, чтобы я мог найти решение.

Ответ №1:

Как указано @kaiido, виновником, по-видимому, является пустое .block-row gap свойство.

Мы столкнулись с той же проблемой и опубликовали ошибку в Chrome, см. Ссылку.

Нашим решением было удалить gap свойство, когда контейнер пуст.

В вашем случае

 .block-row { display: flex; gap: 32px; }
.block-row:empty { gap: unset; }

Комментарии:

1. Размещение обновленной проблемы здесь — bugs.chromium.org/p/chromium/issues/detail?id=1161709

Ответ №2:

У меня не было пустых тегов, и я все еще получал эту проблему. Поэтому я просто полностью удалил gap в режиме печати, и это сработало.

 @media print {
    * {
        gap: 0 !important;
    }
}