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 项，唉.不可见项可能是页眉中的一个段落，打开/关闭随机页脚跨度顶部位置将使页眉段落重新可见.

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-index 并包含整个屏幕的组件.这个页面加载器会一直显示直到 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"

或

[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?

推荐答案

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

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屋！