Text renders blank in Chrome, reappears when selected

The problem

I'm using innerHTML to put HTML-formatted text in a <div>. At a consistent, seemingly random point in the text, the fonts stop being rendered and display blank. When I select the invisible text, it reappears.

Description of the code

1. We have a single <div id="text" inner-h-t-m-l="[[markup]]">.

2. The initial markup doesn't contain any data apart from empty segments with IDs:

   <div id="segment-1"></div><div id="segment-2"></div>... etc

3. In Javascript, we loop over the IDs using querySelector (this is slow) and insert HTML into the each segment's innerHTML.

The framework used is Polymer 2.

Additional info; video

In the Chrome Dev Tools, the invisible text is shown as present in the DOM and seems to be no different from the text that renders correctly.

Here's a video to illustrate the problem.

Here's a screenshot of a Chrome profiler run: