Почему некоторые границы не печатаются из приложения Electron?

Question

В приложении Electron я загружаю HTML-страницу, предварительно загруженную с помощью CSS, в iframe, а затем динамически заполняю ее содержимым в JavaScript. (Все это выполняется в процессе рендеринга - IPC не выполняется.) После заполнения iframe я пытаюсь распечатать его содержимое, используя iframe.contentWindow.print().

Как показано ниже, скрипт динамически генерирует .item с, каждый из которых может содержать любое количество .row с. Каждый .row содержит два фрагмента текста на противоположных сторонах экрана, разделенных .separator с пунктирной рамкой.

Когда я загружаю и печатаю этот HTML-код в Chrome, Firefox или Safari, PDF-файл, сгенерированный print(), содержит каждую пунктирную рамку и выглядит точно так же, как визуализированный HTML-код на веб-странице (FWIW, обычно iframe «скрыто» с помощью height: 1px; width: 1px; visibility: hidden;, но, похоже, это не имеет значения)

Однако в приложении Electron в печатном PDF-файле отображаются только некоторые границы .separator, а другие полностью пустые и не имеют границ. Пропущенные значения .separator одинаковы при каждой печати документа.

PDF должен выглядеть следующим образом (сгенерированный из Chrome):

Но версия Electron выглядит так:

Я пытался использовать другие методы для генерации пунктирных линий (например, пользовательский border-image или градиент background, аналогичный описанному здесь ), ни один из которых не сработал. Я пробовал включить CSS-правила -webkit-print-color-adjust: exact и color-adjust: exact, которые также не имеют значения. Установка тега style на media="print" только добавляет больше проблем и ничего не делает для исправления границ.

Как сделать так, чтобы сгенерированный PDF из функции iframe.contentWindow print() содержал каждую пунктирную рамку в iframe?

* {
  padding: 0;
  margin: 0;
}

@media print {
  .item {
    page-break-inside: avoid;
  }
}

.item {
  padding: 0.25in;
  line-height: 0.35in;
}

.row {
  display: flex;
  justify-content: space-between;
}

.label {
  text-align: center
}

.text1 {
  text-align: left;
}

.text2 {
  text-align: right;
}

.separator {
  margin-left: 1pt;
  margin-right: 1pt;
  vertical-align: bottom;
  flex-grow: 1;
  height: 1.5em;
  border-bottom: 1px dotted black;
  /* These last two rules are likely superfluous */
  -webkit-print-color-adjust: exact !important;
  color-adjust: exact !important;
}

<div class="item">
  <div class="row">
    <p class="text1">Text 1</p>
    <div class="separator"></div>
    <p class="text2">Text 2</p>
  </div>
  <p class="label">Label for Item</p>
</div>
<div class="item">
  <div class="row">
    <p class="text1">Text 1</p>
    <div class="separator"></div>
    <p class="text2">Text 2</p>
  </div>
  <div class="row">
    <p class="text1">Text 1</p>
    <div class="separator"></div>
    <p class="text2">Text 2</p>
  </div>
  <p class="label">Label for Item</p>
</div>

Я использую следующее программное обеспечение:

• Electron v1.8.8
• Chrome 69.0.3497.81
• Safari 11.1.2
• Firefox 62.0
• macOS High Sierra 10.13.6