Webview updating VH elements and causing scroll jumping

When my site is viewed on a web view like in instagram. The showing/hiding of the bottom nav bar causes the VH elements in my page to resize, which then causes a jump in the scroll. Whenever the bottom bar shows or hide, the vh is updated. I assume this is causing a listener to check the new height of the viewport and updating the vh, then causing a jump in the scroll. This does not occur in chrome or safari, as I read both those browsers fix the viewport height on load.

Is there any fix to this? Almost makes the website unusable in webviews such as instagram’s web view. Here is a video and a preview of the site for you to open in instagram.

EDIT: Checked this on twitter’s web view, no issue. Only appears to be an issue in ig.

http://maxwell-blessens-five-sta-f6a34106406a6.webflow.io/


Here is my site Read-Only: LINK
(how to share your site Read-Only link)