Problemy z renderingiem DOM z Angular 2 Chrome

Question

Nasz zespół (nie tylko mój komputer) ma dziwny problem z renderowaniem dla Angular 2, który występuje tylko w Chrome.

Mianowicie, podczas poruszania się po aplikacji lub odświeżania w połowie aplikacji wiele elementów w DOM jest niewidoczna. NA PRZYKŁAD. akapity i nagłówki, które zawierają tekst, ale tekst nie jest wyświetlany dla użytkownika końcowego, ale tekst jest widoczny w inspektorze DOM.

DOM przywróci widoczność po edycji losowego atrybutu CSS w inspektorze. Ten CSS nie musi nawet odnosić się do niewidzialnego elementu DOM pod ręką, ala. Niewidoczny element może być akapitem w nagłówku, a włączenie/wyłączenie górnej pozycji stopki w stopce spowoduje, że akapit nagłówka odzyska widoczność.

Przed przełączając element losowy CSS

Po przełączając element losowy CSS

Dzieje się na stronach, które mają stałą ładowarka stosowanych do nich, np. komponent, który ma ustaloną pozycję, super-wysoki indeks z-i obejmuje cały ekran. Ten program ładujący strony wyświetla się, aż ngOnInit się zakończy, co oznacza, że ​​jest dość szybki przez większość czasu. Wyłączenie tego programu ładującego wydaje się naprawić ten problem.

Czasami dzieje się tak również z tekstem w tagach {{var}}, gdy wartość var ​​jest ładowana po załadowaniu strony.

Próbowaliśmy przełączanie ładowarka albo

*ngIf="true/false" 

LUB

[style.display]="block/none" 

Żadne z tych rozwiązań nie działa, niektóre dom jest nadal niewidoczny.

Czy ktoś ma pojęcia, dlaczego tak się dzieje?

Answer 1

Myślę, że to pytanie zostało odebrane tutaj: custom @font-face does not load in chrome (chrome custom fonts not rendering)

Zrobiłem szybki test i wydaje się mieć trwałe rzeczy.

Zasadniczo wielokrotnie dodawałem niestandardową czcionkę (za każdym razem, gdy do komponentu dodawano plik SCSS), więc przeniosłem go, więc jest on ładowany tylko jeden raz i teraz ładuje się poprawnie.

Answer 2

Problemem jest wielokrotne uwzględnienie w Google Chrome, napotykam podobny problem, gdy używam angular4 i material lite. Problem polega na tym, że importowałem czcionki w każdym komponencie i naprawiałem je przez importowanie czcionki w jednym głównym składniku rodzica.