/resp/ - Responsive Design

i'm working on this landing page for a client and it's driving me crazy. the hero section keeps jumping around when the address bar hides or shows while scrolling. i tried using height: 100vh; but that just makes the bottom of the image get cut off by the browser ui. i even tried switching to height: 100dvh; like everyone says, but now my footer is acting all weird and overlapping the content on some older ios versions. ngl it's a mess right now. been trying to use a little bit of javascript to calculate the actual window height manually but that feels so hacky heavy for a simple hero. has anyone actually found a way to make this consistent without breaking the layout on safari?