Issue: Radix Dialog in Safari iOS 15 on iPhone X+ jumps on scroll when address bar height animates
(View the source code for this page here and for the Dialog wrapper component here)
Open this page in mobile Safari on iPhone X+ running iOS 15+
Tap the following button to open the Radix UI Dialog, scroll up and down, and observe the bottom as the Safari address bar height animates:
Observed:
Height of this dialog "jumps" when the Safari address bar height shrinks down during a swipe up. That is, content beneath the dialog is visible during the address bar animation, when it should not be.
Important 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.