Angular 2 Chrome DOM 渲染问题答案

【问题标题】：Angular 2 Chrome DOM rendering problemsAngular 2 Chrome DOM 渲染问题
【发布时间】：2017-08-03 15:47:21
【问题描述】：

我们的团队（不仅是我的计算机）在 Angular 2 上遇到了一个奇怪的渲染问题，这种问题只发生在 Chrome 中。

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

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

在切换随机 CSS 元素之前

切换随机 CSS 元素后

这发生在应用了固定加载器的页面上，例如。具有固定位置、超高 z-index 并包含整个屏幕的组件。这个页面加载器会一直显示到 ngOnInit 完成，这意味着它大部分时间都非常快。禁用此加载程序似乎可以解决问题。

这有时也会发生在 {{ var }} 标记中的文本上，当页面加载后加载 var 值时。

我们已尝试使用任一方式切换加载器

*ngIf="true/false"

或

[style.display]="block/none"

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

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

【问题讨论】：

你在构建一个 chrome 应用吗？如果是这样，您可能需要在区域中运行一些回调...另请注意，angular 会覆盖大多数内置异步函数（setTimeout、ajax 完成等）以在区域中运行，并且在 angular 之后加载的库也可以覆盖这种行为（我在使用一些cordova插件时遇到过这种情况）
遗憾的是，我没有构建 Chrome 应用程序。只是一个普通的 Angular 2 网络应用程序。抱歉，如果我的问题描述中没有说明这一点。
也许您可以在未重绘的元素上使用transform: translate3d(0,0,0) 强制硬件加速。
这不起作用。如果我找到此问题的根本原因，我会及时通知您，但我们认为这可能是由于竞争条件导致自定义字体从外部源加载，并且在 Angular 渲染或重新渲染某些代码之前未加载。当我们使用一些默认字体时，是没有问题的。
您是否使用自定义字体@KarlJohanVallner？我们遇到了同样的事情，这与字体渲染不正确有关

【解决方案1】：

我做了一个快速测试，它似乎已经修复了一些问题。

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

【讨论】：

【解决方案2】：

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

【讨论】：