Edit: Previous question is below but I have adjusted it because it's not specific to Safari, it just so happens Safari has a semi-transparent address bar but the question now becomes a fixed <body> cropping the address bar because it's not within the viewport.
Although the fix (if it exists) has to keep position: fixed due to that prevent iOS from scrolling the body during an overlay.
Show rest of element behind Safari iOS address bar when body has fixed position
I have an overlay that when triggered, sets the body to position: fixed to resolve iOS being able to scroll in the background. I have also set the body with pre-calculated top and height values on the document to preserve its position after the overlay is closed.
The issue is that Safari has a transparent address bar that blurs everything behind it so it "snaps" to a white background when the body becomes fixed since there is nothing "above" the top of the viewport.
I understand position: fixed removes an element from the document flow but when that element is the body I would think that setting the height larger than the viewport and not being at the top of the page would mean that the background should still be "visible" behind the address bar.
I have tried Fixed position but relative to container which sets transform: translateY(x%). I've tried this on both the body and overlay but Safari is just cropping it off the viewport anyway.
Setting any sort of overflow doesn't seem to work. The element exists above it, simply deleting the fullscreen element and updating the top value within the dev console shows that it still exists so it doesn't automatically get cut off (unless you have overflow: hidden).
It is very visually obvious when the color is dark or vibrant and changes to white after becoming fixed.
I have seen questions similar to this but are ultimately seeking a different answer.
Happening on iOS (and ipadOS) Safari versions 12-14. I cannot confirm whether it's happening on macOS Safari or not.
Here is a badly created image of what I'm talking about.
If you can imagine a full screen overlay covering the viewport, the red line shows what I picture the <body> element to be. It would still have the full height, and top is just "setting" the position on the document to fixate to but everything above the (red) viewport should still exist right?
Apparently not, because Safari decides to change to white when <body> is fixed.
Note: <body> generally is set to overflow: hidden to prevent body scrolling but that would mean it would absolutely get cut off with a fixed: position so I have left it out.
Example 2
Top: an example of a red element showing through the transparent address bar
Bottom: after <body> becomes fixed
