Chrome中的文字呈现空白，选中后会重新显示

Question

问题

我正在使用innerHTML将HTML格式的文字放在<div>中。在文本中一致的，看似随机的点上，字体停止呈现并显示为空白。当我选择不可见的文本时，它会重新出现。

代码描述

1. 我们有一个<div id="text" inner-h-t-m-l="[[markup]]">。

2. 初始标记除了包含ID的空段之外不包含任何数据：

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

3. 在Javascript中，我们使用querySelector循环ID（这很慢）并将HTML插入每个细分的innerHTML。

使用的框架是聚合物2。

其他信息;视频

在Chrome开发工具中，不可见文本显示为DOM中的内容，似乎与正确呈现的文本没有区别。

视频中的字体是非标准的，但使用系统字体时也会出现问题。

Here's a video to illustrate the problem.

以下是Chrome Profiler运行的屏幕截图：



编辑：

在评论中讨论后，我认为我应该链接实际的代码。

Here's有问题的元素。

相关部分是：

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

编辑2：

我找到了两个可能的解决方法，但是没有一个能够运行得很好。

1. 如果我以3秒的超时时间运行this.querySelector('#text').innerHTML = this.querySelector('#text').innerHTML，它会正确地绘制文本。

2. 添加文本时，如果我使用this comment中的异步processArray函数，它会正确呈现文本，虽然速度很慢，因为它会在每次插入后更新布局。

有了这两点，我的工作理论就是Chrome在innerHTML属性完全分配之前更新了布局。

我也忘了提这个项目使用Shady DOM。