Angular 2 Chrome DOM渲染问题

Question

我们的团队(不仅是我的电脑)对Angular 2有一个奇怪的渲染问题,这只发生在Chrome中.

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

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

在切换随机CSS元素之前

切换随机CSS元素后

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

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

我们尝试用任何一个切换装载机

*ngIf="true/false"

要么

[style.display]="block/none"

这些解决方案都不起作用,一些dom仍然是看不见的.

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

Answer 1

我认为这个问题已在这里得到解答:自定义@ font-face不加载chrome(chrome自定义字体无法渲染)

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

基本上我多次包括自定义字体(每次将一个SCSS文件添加到组件中),所以我已经移动了它,所以它只被加载一次,现在加载很好.