Angular 2 Chrome DOM rendering problems

Question

Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome.

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.

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.

Before toggling a random CSS element

After toggling a random CSS element

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.

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"

Neither of these solutions work, some of the dom is still invisible.

Does anyone have a clue as to why this happens?

Barrens

are you building a chrome app ? if so you might need to run some callbacks in zone... Also note that angular overrides most of the built-in async function (setTimeout, ajax complete, etc) to run in zones and a library that is loaded after angular could also override this behavior (I experienced this with some cordova plugins) – Werbel

Sadly I am not building a Chrome app. Just a regular angular 2 web app. Sorry if this was left unclear in my problem description. – Barrens

maybe you could force hardware acceleration with a transform: translate3d(0,0,0) on the elements that do not get repainted. – Werbel

This didn't work. I will keep you posted, if I find a root cause of this problem, but we think it might be due to race conditions with a custom font being loaded from external sources and it not being loaded before Angular renders or re-renders some code. When we use some default fonts, there is no problems. – Barrens

are you using custom fonts @KarlJohanVallner? We experienced the same thing and it had to do with a font not rendering correctly – Suzysuzzy

I am having exactly the same issue, please do update if you find anything, i'm starting to get worried! – Ridotto

I will keep updating this in the following weeks, dont worry, we have a big project and we just havent been worried enough to fix this issue as of yet. Currently this seems to be due to custom fonts or due to animated full screen loader flashing in the milliseconds after rendering a page, which could maybe confuse chrome. – Barrens

I agree on the font front, if I disable my downloaded font (open-sans), and use a default (ariel), all works as expected, but using the custom font, text shows sometimes... – Ridotto

Answer 1

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.

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.

Ridotto

Thank you dear sir! – Barrens

Answer 2

The issue is multiple inclusion in google chrome, I face similar issue when using angular4 and material lite.The problem is i imported fonts in every component and fixed it by importing font in single main parent component.

Samite