Angular 2 Chrome DOM渲染问题 [英] Angular 2 Chrome DOM rendering problems
问题描述
我们的团队(不仅是我的计算机)在Angular 2中遇到了一个奇怪的渲染问题，仅在Chrome中发生.
Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome.
也就是说，在浏览应用程序或在中间应用程序中刷新时，DOM中的许多项目都是不可见的.例如.段落和标头中包含文本，但不会为最终用户呈现该文本，但可以在检查器DOM中看到该文本.
Namely, when navigating the app or refreshing in mid app, many of the items in DOM are invisible. EG. paragraphs and headers that have text in them, but the text is not rendered for the end user, but the text is seen in the inspector DOM.
如果您在检查器中编辑随机CSS属性，则DOM将重新获得可见性.此CSS甚至不必适用于手头的不可见DOM项目，ala.不可见的项目可能是页眉中的一个段落，并且打开/关闭一个随机的页脚span-s顶部位置将使页眉段落重新获得可见性.
The DOM will regain visibility if you edit a random CSS attribute in the inspector. This CSS doesnt even have to be applicable to the invisible DOM item at hand, ala. the invisible item could be a paragraph in the header, and switching a random footer span-s top position on/off will make the header paragraph regain visibility.
切换随机CSS元素之前
Before toggling a random CSS element
切换随机CSS元素后
After toggling a random CSS element
这种情况发生在应用了固定加载程序的页面上，例如.具有固定位置，超高z索引并涵盖整个屏幕的组件.该页面加载程序将一直显示到ngOnInit完成为止，这意味着它在大多数情况下都非常快.禁用此加载程序似乎可以解决该问题.
This happens on pages that have a fixed loader applied to them, eg. a component that has position fixed, a superhigh z-index and encompasses the whole screen. This page loader is displayed until ngOnInit finishes, meaning it is pretty fast most of the time. Disabling this loader seems to fix the issue.
在页面加载后加载var值时，{{var}}标签中的文本有时也会发生这种情况.
This also sometimes happens to text in {{ var }} tags, when the var value is loaded after the page has loaded.
我们尝试用任一触发加载器
We have tried toggling the loader with either
*ngIf="true/false"
OR
[style.display]="block/none"
这两种解决方案均无效，某些dom仍然不可见.
Neither of these solutions work, some of the dom is still invisible.
有人知道为什么会发生这种情况吗?
Does anyone have a clue as to why this happens?
推荐答案
I think this question has been answered here: custom @font-face does not load in chrome (chrome custom fonts not rendering)
我已经进行了快速测试，似乎已经修复了一些问题.
I have done a quick test and it seems to have fixed things.
基本上，我多次包含自定义字体(每次将SCSS文件添加到组件中)，所以我将其移动了，因此只加载了一次，现在可以正常加载了.
Basically I was including the custom font many times (each time a SCSS file was added to a component), so I have moved it, so it's only being loaded a single time, and it now loads fine.
这篇关于Angular 2 Chrome DOM渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
