Angular 2 Chrome DOM 渲染问题
Angular 2 Chrome DOM rendering problems
我们的团队（不仅是我的电脑）在 Angular 2 中有一个奇怪的渲染问题，只发生在 Chrome.
也就是说，当导航应用程序或在应用程序中间刷新时，DOM 中的许多项目是不可见的。例如。段落和 header 中有文本，但文本不会呈现给最终用户，但在检查器中可以看到文本 DOM.
如果您在检查器中编辑 运行dom CSS 属性，DOM 将重新可见。这个 CSS 甚至不必适用于手边的隐形 DOM 物品，唉。不可见的项目可能是 header 中的一个段落，切换 运行dom 页脚 span-s 顶部位置 on/off 将使 header 段落恢复知名度。
在切换 运行dom CSS 元素之前
切换 运行dom CSS 元素后
这发生在应用了固定加载程序的页面上，例如。一个位置固定的组件，超高 z-index 并包含整个屏幕。这个页面加载器一直显示到 ngOnInit 完成，这意味着它在大多数时间都非常快。禁用此加载程序似乎可以解决问题。
当页面加载后加载 var 值时，{{ var }} 标记中的文本有时也会发生这种情况。
我们已尝试使用任一方式切换加载程序
*ngIf="true/false"
或
[style.display]="block/none"
这些解决方案都不起作用，一些 dom 仍然不可见。
有人知道为什么会这样吗？
我认为这个问题已经在这里得到解答：custom @font-face does not load in chrome (chrome custom fonts not rendering)
我做了一个快速测试，它似乎已经修复了一些问题。
基本上我多次包含自定义字体（每次将 SCSS 文件添加到组件），所以我移动了它，所以它只加载了一次，现在加载正常。
问题是 google chrome 中的多重包含，我在使用 angular4 和 material lite.The 时遇到类似的问题，问题是我在每个组件中导入字体并修复通过在单个主要父组件中导入字体。
我们的团队（不仅是我的电脑）在 Angular 2 中有一个奇怪的渲染问题，只发生在 Chrome.
也就是说，当导航应用程序或在应用程序中间刷新时，DOM 中的许多项目是不可见的。例如。段落和 header 中有文本，但文本不会呈现给最终用户，但在检查器中可以看到文本 DOM.
如果您在检查器中编辑 运行dom CSS 属性，DOM 将重新可见。这个 CSS 甚至不必适用于手边的隐形 DOM 物品，唉。不可见的项目可能是 header 中的一个段落，切换 运行dom 页脚 span-s 顶部位置 on/off 将使 header 段落恢复知名度。
这发生在应用了固定加载程序的页面上，例如。一个位置固定的组件，超高 z-index 并包含整个屏幕。这个页面加载器一直显示到 ngOnInit 完成，这意味着它在大多数时间都非常快。禁用此加载程序似乎可以解决问题。
当页面加载后加载 var 值时，{{ var }} 标记中的文本有时也会发生这种情况。
我们已尝试使用任一方式切换加载程序
*ngIf="true/false"
或
[style.display]="block/none"
这些解决方案都不起作用，一些 dom 仍然不可见。
有人知道为什么会这样吗？
我认为这个问题已经在这里得到解答：custom @font-face does not load in chrome (chrome custom fonts not rendering)
我做了一个快速测试，它似乎已经修复了一些问题。
基本上我多次包含自定义字体（每次将 SCSS 文件添加到组件），所以我移动了它，所以它只加载了一次，现在加载正常。
问题是 google chrome 中的多重包含，我在使用 angular4 和 material lite.The 时遇到类似的问题，问题是我在每个组件中导入字体并修复通过在单个主要父组件中导入字体。