I am encountering a problem with my webpage that has a sticky footer, scrolling content, and an overlay that appears after a few seconds. The issue is specific to Safari on certain devices like iPhone 12-15, where the footer and part of the scrolling content sometimes overlap the bottom section of the overlay. This inconsistency leads me to believe it's not a CSS problem but possibly related to how the scroll changes the container's height. Despite setting the overlay content to fill the entire screen, parts get cut off when the footer and content render on top. All elements are contained within the body tag.
<body style="overflow: hidden; position: absolute; height: unset;">
<div class="page">
<main style="display: block;">
<div class="content" style="position: relative; display: flex; flex-direction: column;">
<div class="footer" style="display: block; width: 100%; left: 0; bottom: 0; position: fixed; pointer-events: auto;">...</div>
<div class="scroll_content" style="max-width: 100vw; overflow: hidden;">...</div>
</div>
</main>
</div>
<div id="overlay" style="position: fixed; left: 0px; bottom: 0px; width: 100vw; height: 100%; z-index: 9223372036854776000 !important;">..</div>
</body>
Is it possible that Safari renders elements in a different order at times? I'm struggling to reproduce the issue consistently and determine its cause, so any help or insights would be greatly appreciated!
Apologies for the generic illustration, as replicating the exact scenario is challenging :)https://i.sstatic.net/Bhjvi.png