Question

我们的团队（不仅仅是我的电脑）对Angular 2有一个奇怪的渲染问题，只发生在Chrome中。

即，在应用程序中导航或在应用程序中期刷新时，DOM中的许多项目都是不可见的。例如。包含文本的段落和标题，但文本不会为最终用户呈现，但文本在检查器DOM中可见。

如果在检查器中编辑随机CSS属性，DOM将重新获得可见性。这个CSS甚至不必适用于手头的隐形DOM项目，ala。不可见的项目可以是标题中的一个段落，并且打开/关闭随机页脚跨度的顶部位置将使标题段落重新获得可见性。

在切换随机CSS元素之前

切换随机CSS元素后

这种情况发生在应用了固定加载程序的页面上，例如。具有固定位置，超高z指数并包含整个屏幕的组件。显示此页面加载器直到ngOnInit完成，这意味着它在大多数情况下都非常快。禁用此加载程序似乎解决了这个问题。

在{{var}}标记中，当页面加载后加载var值时，有时会发生这种情况。

我们尝试用

切换加载器

*ngIf="true/false"

OR

[style.display]="block/none"

这些解决方案都不起作用，有些dom仍然不可见。

有没有人知道为什么会这样？

Answer 1

我做了一个快速测试，似乎有固定的东西。

基本上我多次包含自定义字体（每次将一个SCSS文件添加到组件中），所以我已经移动了它，所以它只被加载一次，现在加载很好。

Answer 2

问题是谷歌浏览器中多次包含，我在使用angular4和material lite时遇到类似问题。问题是我在每个组件中导入字体并通过在单个主要父组件中导入字体来修复它。