I have an ionic v5 app deployed to the web. I created a link to it in my instagram bio. My webapp then renders in instagram’s webview.
It initially loads properly with all of the content inside the viewport (under the top header and above the bottom navbar of their webview) but if you scroll around, it causes the ionic app content to extend below and above the header and nav footer hiding my webapp’s contents…
When a customer adds an item to their cart, I have a banner come up at the bottom, this was being completely hidden by instagram’s bottom navbar.
I was able to “fix” this by changing my index.html’s viewport-fit=cover to viewport-fit=auto
my code is now:
<meta name="viewport" content="viewport-fit=auto, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But I’m guessing there’s some other features the Ionic team has built to make them choose to use cover instead? Could y’all chime in on why this decision was made?