Elements with position "fixed" inside an iframe are not rendering in Safari

Question

We are experiencing a problem where elements with position: fixed; within an iframe are not being rendered correctly. We only noticed this on macOS in Safari.

Here is how it should look:

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

On page load the top and bottom bars are not visible. They are in the DOM taking up space and can be clicked but they have not been "rendered" by the browser. As you can see in the image above the bars appear as white space.

If we force a redraw via JS, CSS or by resizing the browser the bars will appear. We are however not looking for a solution for how to force redraw. Our question is why is this happening in the first place?

You can find a live example here:

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

PS: It does not always happen. Sometimes, when resizing the browser and trying again, it will display correctly. We hope you can reproduce the problem.

Answer 1

So there are some glitches with position: fixed and z-index. Some of the older browsers treat it a bit differently and deal with stacking contexts in a different way.

After a bit of trial and error I've managed to get it working with injected stylesheet by adding:

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

Also you should be able to remove the unnecesarry z-index: 99999. Hope that helps.