Why do some borders not print from an Electron app?

Question

In an Electron app, I'm loading an HTML page preloaded with CSS into an iframe, then dynamically populating it with content in JavaScript. (All of this is being done from the render process—no IPC is occurring.) After the iframe is populated, I'm attempting to print its contents using iframe.contentWindow.print().

As shown below, the script dynamically generates .items, each of which may contain any number of .rows. Each .row contains two pieces of text at opposite sides of the screen, separated by a .separator with a dotted border.

When I load and print this HTML in Chrome, Firefox, or Safari, the PDF generated by print() contains every dotted border and looks exactly as the rendered HTML does within the web page (FWIW, the iframe is ordinarily "hidden" using height: 1px; width: 1px; visibility: hidden;, but this seems to make no difference).

However, within the Electron app, only some of the .separator borders render in the print PDF—the others are completely blank and have no border whatsoever. The skipped .separators are the same every time the document is printed.

The PDF should look like this (generated from Chrome):

But the Electron version looks like this:

I've tried using other techniques to generate the dotted lines (such as a custom border-image or using a gradient background similar to the one described here), neither of which have worked. I've tried including the -webkit-print-color-adjust: exact and color-adjust: exact CSS rules, which similarly make no difference. Setting the style tag to media="print" only introduces more issues and does nothing to fix the borders.

How can I force the generated PDF from the iframe.contentWindow's print() function to contain every dotted border in the 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>

I'm using the following software:

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