Chromeで目に見える色のコンテンツが透明に表示されます

Question

最近、私はChromeでのみ起こっていることに気付きました（私の現在のバージョンは58です）。

説明するのは少し難しいので、私は本当に何が起こっているかを示すために私のテキストの説明以外に明確なアニメーションを含めるようにしてください行わ：

<h1>テキストが表示され、計算された色が#222れている様子がわかり、内容は上記の通りです（つまり、z-indexのようなものではありません）。しかし、私はページのサイズを変更したり、devtoolsを使っていくつかの変更を加えない限り、テキストを読み込むことはできません。それは選択/強調表示することができます。

それはどのような方法で助けることができる、と私は、このようなShadow DOMとしてDOMのカプセル化の任意の並べ替えを使用していない場合、アプリケーションは角度で構築されています。

Answer 1

私は自分のモジュールのほとんどでインポートする一連の共有スタイル（たとえば、 - colors.scss）を使用しています。

home.module.ts - >home.component.ts - この共有スタイルシートの>home.component.scss

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

一次（唯一の関連ビットが示されている）あっtypography.scssであった：繰り返しインポート

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

をフォントがその画面のちらつきを引き起こしていた、私がしなければならなかったのは、一度だけ読み込まれます（アプリの開始時に）。

だから、僕はメインモジュールSCSSにフォントのインポートを移動 - >app.component.scss