All geek questions in one place

Angular 2 Chrome DOM Issues

Our team (not just my computer) has a wierd render problem for Angular 2, which only happens in Chrome.

Namely, when navigating the application or updating in the middle of the application, many elements in the DOM are invisible. EG. paragraphs and headings with text in them, but the text is not displayed to the end user, but the text is displayed in the DOM inspector.

The DOM will restore visibility if you edit a random CSS attribute in the inspector. This CSS doesn't even have to be applicable to the invisible DOM clause at hand, ala. an invisible element can be a paragraph in the heading, and turning on / off the top position of the top footer will cause the heading paragraph to restore visibility.

Before switching a random CSS element Before switching a random CSS element

After switching a random CSS element After switching a random CSS element

This happens on pages that use a fixed bootloader, for example. a component that has a fixed position, an ultra-high z-index and covers the entire screen. This page loader is displayed until ngOnInit finishes, which means that it is pretty fast in most cases. Disabling this bootloader seems to fix the problem.

This also sometimes happens with text in the {{var}} tags when the var value is loaded after the page loads.

We tried to switch the bootloader using

*ngIf="true/false"

OR

 [style.display]="block/none"

None of these solutions work, some of the dom are still invisible.

Does anyone know why this is happening?

+5
source share
2 answers

I think this question was answered: custom @ font-face does not load in chrome (chrome custom fonts are not displayed)

I checked a quick check and it seems to be fixed.

Basically, I included a custom font many times (every time an SCSS file was added to a component), so I moved it, so it only loads once, and now it loads normally.

+7
source

The problem is multiple inclusion in google chrome, I am facing a similar problem when using corner4 and lite materials. The problem is that I imported the fonts in each component and fixed it by importing the font into one main parent component.

+3
source

Source: https://habr.com/ru/post/1265391/

More articles:


All Articles