[Dialog] Height "jumps" at bottom on scroll when Safari address bar animates on iPhone X+ and iOS 15+

[just-learning-1]

Bug report

Current Behavior

1. Visit this page in Safari on an iPhone X+ running iOS 15+
2. Tap the button on the page to open the Radix UI Dialog, then scroll up and down, and observe the bottom as the Safari address bar height animates
3. Observed: Height of the dialog "jumps" at the bottom as the Safari address bar height shrinks down during a swipe up. That is, content beneath the dialog becomes visible during the address bar animation, when it should not be.4.

Notes:

• Happens when the dialog's contents does not overflow past the viewportal height, but the page beneath's contents does; the "scrolling" when the dialog is open is of the page underneath
• Swipe down twice, then up, for largest gap jump
• Effect is worse when a button on a fixed bottom bar is the DialogTrigger. In that case, the dark overlay beneath the dialog content is also visible.

Expected behavior

Ultimately, for the full screen Dialog to never reveal the content beneath it.

Reproducible example

Visit this page in Safari on an iPhone X+ running iOS 15+

Suggested solution

• Ideally, I'd want it to be impossible to "scroll" the page beneath the Dialog while it's open. That way the iPhone Safari address bar animation wouldn't even happen, and the problem goes away.
• That's in fact what Airbnb's modal dialogs seem to do on mobile, and it seems to work nicely.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	0.1.7 and 0.1.8-rc.45
React	n/a	17.0.2
Browser	Safari iOS 15.1 and 15.5 on iPhone 13 Pro Max
Assistive tech
Node	n/a
npm/yarn
Operating System	iOS 15.1 and 15.5 on iPhone 13 Pro Max

[ItzaMi]

@benoitgrelard , I don't think that this issue belongs to the website. The user presented their own project while using the dialog. In their use case, opening the dialog removes the margin applied to body but seems to be detached from this repo

[chaance]

@ItzaMi Good callout, moved it back!