2

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:

  1. Copy this link: https://alwyntan.github.io/test-page/, don't just click on it as it'll work fine.
  2. Send the link to yourself (on iMessage, Messenger, or any messaging service you use).
  3. 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.

Alwyn Tan
  • 21
  • 1
  • 5
  • Are you bumping up against the fact that the viewport height in IOS is constant, ie the same whether or not the user has scrolled making the actual screen that is usable different? If it is the problem there’s lots of discussion and proposed workarounds on [link] https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser – A Haworth Feb 07 '21 at 22:37
  • Not exactly, I'm aware of the behavior of 100vh in mobile devices. The issue here is that it only happens on ios Chrome but not Safari, and it only happens when the link is opened from another app that is not Chrome. Opening the page in Chrome directly has no issue. – Alwyn Tan Feb 08 '21 at 23:08

0 Answers0