iOS Chrome seems to be calculating the html viewport incorrectly when a link is clicked externally (from iMessage, Twitter, Messenger, etc) to be opened in Chrome.
The html is a simple one:
<!DOCTYPE html>
<html lang="en" style="background: linear-gradient(#e66465, #9198e5)">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
Steps to reproduce:
- Copy this link: https://alwyntan.github.io/test-page/, don't just click on it as it'll work fine.
- Send the link to yourself (on iMessage, Messenger, or any messaging service you use).
- Open the link that you just sent to yourself, on Chrome.
This issue is particularly problematic when developing pages that are meant to be shared with others and has a CTA button absolutely positioned at the bottom of the page (The button doesn't show as the user would have to scroll down to see it). Imagine an event page with a "Join Event" button absolutely positioned at the bottom of the page and the user can't see it immediately.
You'll see that the page is scrollable when it should not be. Try again by tapping on the address bar and hitting return, the page would revert back to its expected behavior (html takes up the available viewport correctly). Why does this happen and does anyone know how to fix it?
Thanks so much in advance.