Elongated mobile height - ONLY when opening from a link in Chrome

When I open the website from a link in iMessage on my iPhone, the page loads with an elongated view height on Chrome, necessitating a scroll to view my entire Full Screen Nav Menu and Preloader. When I navigate to the site from the search bar in Chrome, the site loads perfectly. The problem does not seem to happen on Safari.

I’ve found this solution for fixing mobile view heights, but I can’t completely follow the implementation for Webflow.

Looking for any solutions or thoughts you might have, thanks!

Read Only Version of My Site in Designer


Hi Kevin,
Here you go:

https://webflow.com/website/100vh-trick

Hi Aviv,

Appreciate you responding, but unfortunately this doesn’t seem to be the solution for this exact issue, even when using your demo site.

To test this, I texted myself a link to your demo site via iMessage 100vh-trick.webflow.io. Then clicked the link in iMessage on my phone. This opened the site in Chrome on my iPhoneX and this is the way the page looks: IMG_8075.PNG|230x500 .

When I go to the search bar and reload the page, it looks the way you anticipate your code working: IMG_8076.PNG|230x500

The issue seems to be the way that Chrome sees view height when opening pages from links. I’m really at a loss now.

Look at this:

Unfortunately this is intentional…

This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :slight_smile:

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey has researched this quite a bit: Viewport height is taller than the visible part of the document in some mobile browsers - Nicolas Hoizey

No fix planned

At this point, there is not much you can do except refrain from using viewport height on mobile devices. Chrome changed to this as well in 2016:


Source: html - CSS3 100vh not constant in mobile browser - Stack Overflow