iframe内の位置が「固定」の要素はSafariでレンダリングされません

Question

iframe内のposition: fixed;の要素が正しくレンダリングされないという問題が発生しています。私たちはSafariのmacOSでこれに気がつきました。ここで

は、それがどのように見えるべきかです：

ここでのMacOSのSafariは、（ページのロードに）次のようになります。ページで

上部と下部をロードバーは表示されません。彼らはスペースを占有しているDOMにあり、クリックすることができますが、ブラウザーによって「レンダリング」されていません。上記の画像でわかるように、バーは空白として表示されます。

JS、CSSまたはブラウザのサイズを変更して強制的に再描画すると、バーが表示されます。しかし、我々は再描画を強制する方法の解決策を模索していません。私たちの質問は、なぜこれが最初に起きているのでしょうか？

あなたはここに実際の例を見つけることができます。

https://testing.enuvo.ch/user/collect/#collector#/user/overlay

PS：それは常に発生しません。時々、ブラウザのサイズを変更して再試行すると、正しく表示されます。問題を再現できることを願っています。

Answer 1

私はあなたの例を試してみましたが、本当に変です。 キャッシュの問題について考えましたか？ Safariはiframeをキャッシュするためのユニークな動作をしていますが、おそらくあなたの問題はこれらから発生します。

このiframeでこのようなキャッシュを無効にするためのHTTPヘッダーを変更できますか？ここで

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0 

はPHPの例です：

header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1. 
header('Pragma: no-cache'); // HTTP 1.0. 
header('Expires: 0'); // Proxies 

Answer 2

あなたはIFRAMEファイルではありません、あなたのビューファイルにCSSを記述する必要があります。

Answer 3

したがって、position: fixedとz-indexのグリッチがあります。古いブラウザの中には、それを少し違って扱うものや、別のやり方でコンテクストをスタックするものがあります。

は試行錯誤のビットの後、私は追加することによって、それが注入されたスタイルシートでの作業を取得するために管理してきました：

#ol-main-header, 
#cl-footer { 
    -webkit-transform: translateZ(0); 
} 

はまた、あなたはunnecesarry z-index: 99999削除することができるはずです。希望が役立ちます。