Elements with a fixed position inside an iframe are not displayed in Safari

Question

We encounter a problem when elements with position: fixed; inside the iframe do not display correctly. We only noticed this on macOS in Safari.

Here's how it should look:

Here's what Safari looks like on macOS (on page load):

When loading the page, the upper and lower bars are not visible. They are located in the DOM, taking up space and can be pressed, but browsers were not “displayed”. As you can see in the picture above, the bars are displayed as spaces.

If we close the redraw via JS, CSS or resize the browser, bars will appear. However, we are not looking for a solution on how to get the redraw. Our question: why is this happening in the first place?

Here you can find a live example:

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

PS: . . , .

Answer 1

, position: fixed z-index. -.

, :

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

z-index: 99999. , .

Answer 2

, . ? Safari iframe, , , .

HTTP iframe, , ?

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 3

you need to write css in the iframe file, not in the view file.