Chrome iPad has wrong viewport height

user_3246108 0
Viewed 403

I have a strange behavior on Chrome browser (v 95.0.4638.50) on iPad (iPadOS 15.0).

I have a first website (let's call it "A") and a second website (called "B"). A has a link to B which will open in a new tab.

The issue is that when B opens in a new tab, it looks like the viewport is bigger than the iPad's screen because my footer (which is position: fixed and bottom: 0) is below the visible part and I have to scroll to see it.

Fun facts about this:

  • if I go back to the first tab (A) and returns to the second one (B), everything goes back to normal
  • I tested with Safari, Firefox and even Edge and the bug only appears in Chrome

Here is how my page is displayed after first load:

Figure1

Then if I scroll a bit, I reach the bottom of the page and I finally see the footer:

Figure 2

And when I switch tabs and come back, everything is back to normal:

Figure 3

Do you know any way to tell Chrome to resize the page correctly ?

ipad viewport google-chrome
1 Answers

Option 1: Try modifying height like so

height: calc(100vh - 65px); 65px

Or Option 2: try this Option 2 with -webkit-fill-available

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

There was a tweet on this

user_60851930
Related