サイトにモーダル ウィンドウを含めるために Angular UI を使用していますが、クリックしてモーダルを開くたびに、HTML が DOM に挿入される前に顕著な遅延が発生します。
遅延の原因を突き止めるためにあらゆることを試しました。テンプレートをキャッシュに入れて、ajax リクエストから読み込まないようにしました。デベロッパー ツール コンソールなどにタイマーを配置したところ、モーダルを開くときに「スタイルの再計算」が原因で約 200 ミリ秒の遅延が発生することが最終的にわかりました。ただし、この時点でのモーダル自体には 3 つの HTML タグと 2 つの単語しか含まれていないため、遅延は発生していません。
次に、モーダルがページ上に完全に配置されているため、ページ全体を再計算して再描画していることに気付きました。ページ自体は非常に長く、繰り返される要素が多数含まれているため、再描画が多くなります。
ここやフィドルで簡単に繰り返すことはできませんが、基本的には多くの HTML を含む非常に長いページであり、モーダル自体は終了 body タグの前に Angular UI によって挿入されます。モーダル自体は position:absolute; です。上:0; 右：0; 下:0; 左：0; 画面いっぱいに。
モーダルとページ コンテンツで translateZ(0) トリックを試しました。また、絶対ではなく position:fixed を試しました。CHromeがページ全体でスタイルの再計算を強制しようとしない限り、モーダルをオーバーレイする方法を見つけることができないようです。
どんなアイデアでも大歓迎です。