Text renders blank in Chrome, reappears when selected

Question

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.

The font in the video is non-standard, but the problem also occurs when using system fonts.

Here's a video to illustrate the problem.

Here's a screenshot of a Chrome profiler run:

Edit:

After a discussion in the comments, I thought I should link the actual code.

Here's the element in question.

The relevant parts are:

• <div id="segmented_text_content" inner-h-t-m-l="[[markup]]"></div>
• _addPrimaryText(textStrings) {...}
• _addSecondaryText(textStrings) {...}

Edit 2:

I found two potential workarounds for this, but neither one works well enough.

1. If I run this.querySelector('#text').innerHTML = this.querySelector('#text').innerHTML with a timeout of 3 seconds, it paints the text correctly.

2. When adding the text, if I use the async processArray function from this comment, it renders the text correctly, albeit very slowly because it updates the layout after every insertion.

With these two points, my working theory now is that Chrome updates the layout before the innerHTML attribute is fully assigned.

I also forgot to mention this project uses Shady DOM.