Sichtbarer farbiger Inhalt zeigt transparent in Chrome

Question

In letzter Zeit habe ich etwas seltsames bemerkt, passiert nur in Chrome (meine aktuelle Version ist 58).

Es ist ein bisschen schwierig zu erklären, so dass ich sicher, klare Animationen neben meinem Text Erklärung aufzunehmen um zu zeigen, was wirklich geschieht:

Der <h1> Text sichtbar ist, feststellen, wie die berechnete Farbe #222 ist, der Inhalt ist oben (ich meine, es sieht nicht aus wie z-index Fehler). Dennoch ist der Text nicht lesbar, wenn ich nicht die Größe der Seite ändere oder Änderungen mit DevTools vornehme. Es kann jedoch ausgewählt/hervorgehoben werden.

Die Anwendung ist mit kantigem gebaut, wenn diese in irgendeiner Weise helfen kann, und ich bin nicht mit jeder Art von DOM Verkapselung wie Shadow DOM.

Answer 1

Ich verwende eine Reihe von gemeinsamen Stilen (zum Beispiel - colors.scss), die ich in den meisten meiner Module importieren.

home.module.ts ->home.component.ts ->home.component.scss

@import "../shared/colors.scss"; 

Eines dieser gemeinsamen Sheets war typography.scss, die hatten die folgenden (nur relevant Bits dargestellt):

@font-face { 
    font-family: "Sawasdee"; 
    src: url("/assets/fonts/sawasdee.ttf") format("truetype"); 
} 

Wiederholt die einführende Font verursachte den Bildschirm flackernd, also musste ich nur sicherstellen, dass es nur war einmal geladen (und am Anfang der App).

Also nur zog ich die Schrift Import in das Hauptmodul SCSS ->app.component.scss