[bug]: iOS 26: Sheet side="bottom" leaves a bottom gap in Safari/Chrome (Backdrop/Modal doesn’t cover safe area)

[janus-reith]

Describe the bug

Both the Overlay and sheet leave a gap at the bottom, where you can see-trough the remaining page.

Similar MUI issue: mui/material-ui#46953

Affected component/components

Sheet

How to reproduce

1. Create a Sheet with <SheetContent side="bottom"
2. Open in Safari, observe the aforementioned issue.

Codesandbox/StackBlitz link

https://stackblitz.com/edit/vitejs-vite-gpzvp8ab?file=src%2FApp.tsx

System Info

iOS 26 Safari/WebKit

[janus-reith]

Closed initially, since in my reproduction attempt, the bottom part actually gets a solid background when the Sheet opens, different from what I observed in another project.

But a similar issue is present when the address bar is in its shrinked scroll state

[janus-reith]

I was able to reproduce the original issue aswell now - Height of the Sheet Content seems to matter.

This works:

This breaks:

[janus-reith]

Appareantly Safari adjusts to the color of the sheet, not sure what the heuristics are:

 <SheetContent side="bottom">
          <div className="bg-red-500">
            <p>Test</p>
          </div>
        </SheetContent>

That red color is not present anywhere else.

I tried with various heights and also realized I'm getting inconsistent results.

But at a certain threshold:

<SheetContent side="bottom">
          <div className="bg-red-500 h-[75.3vh]">
            <p>Test</p>
          </div>
        </SheetContent>

[janus-reith]

Not sure if any of this can be fixed/has a workaround or needs to be fixed within Safari - Lets hope iOS 26.1 helps, some other similar issues regarding the viewport seem to have been fixed there.

[shadcn]

Yeah this is a Safari bug. I've seen this on other sites as well. See https://stackoverflow.com/questions/79753701/ios-26-safari-web-layouts-are-breaking-due-to-fixed-sticky-position-elements-g