2

Everything works fine on any desktop browsers. Regarding mobile browsers, I’m having a really weird issue with Chrome on iOS only.

First load of the website from the URL bar works well, viewport height is correct. However, if I open the same site from the history or bookmarks, the viewport height is wrong and doesn’t take into account the real viewport.

Here is the basic style css I use:

body, html {
  height: 100%;
}

Below part of the code I used before:

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-width: 320px;
    background: #fff;
}

Here is the capture of the first load, there is not scroll bar and height viewport is correct: First Load

Here is the capture on the second load of the page from the history, height is different and the page is scrollable: Second Load

Here are the logs, we can see that the height is different from the first load to the second load: Console Log

I’m not sure if I’m missing something but I disabled as much as possible my code, cleared the cache of the browser etc. but the issue persist. It happens on various iPhone models too.

Edit 12/20/2020

Here is a similar issue on a react website: https://www.kirupa.com/react/examples/react_router/index.html#/

If open via the link, viewport is correct. Reopening this website from the history, it will have a different height and a scroll bar will appear.

Thanks!

Miglieto
  • 33
  • 4
  • Post code, not pictures. – react_or_angluar Dec 19 '20 at 07:25
  • I added the css code, others are capture from the mobile screen – Miglieto Dec 19 '20 at 09:47
  • Does this help? https://stackoverflow.com/a/16837667/3825777 Put your code here http://jsfiddle.net/Markrama/fY39r/3/ or here https://jsfiddle.net/gfcarv/QKgHs/ or here http://jsfiddle.net/rgc2013/As5fN/ or here https://jsfiddle.net/danield770/tWcwa/1/ – react_or_angluar Dec 19 '20 at 09:59
  • Not really unfortunately, I’ve been trying couple ways to handle the style of the page but no chance. – Miglieto Dec 19 '20 at 14:53
  • 1
    Some info that might be helpful to you... any browser on iOS is just WebKit/Safari under the hood. Apple doesn't allow other browser engines. So, the issue is probably some WebKit bug *or* a problem with how Chrome embeds the web view. – Brad Dec 19 '20 at 23:47
  • any update on this? I have the exactly same problem. Once viewport height is broken, it continues even when go to another webpage on the same tab. – user3033077 Jan 19 '21 at 17:36
  • Unfortunately no, I still have the issue and started to give up on it. By the time I posted this thread, I found another post with the exact same issue but the proposed solution doesn’t solved the viewport height after reload. If by chance you find a solution, please keep me updated! https://stackoverflow.com/questions/58935402/ios-chrome-calculates-the-wrong-height-of-the-document – Miglieto Jan 20 '21 at 22:08

1 Answers1

0

Try using

margin:0;
padding:0;
box-sizing:border-box;
}

And remove the display for html.

Xenonwellz
  • 15
  • 5
  • Thanks for your comment, I already used this CSS in my basic setup (I updated the post). In my first post, I just tried to reduce the code as much as possible to see if the behavior was still happening and unfortunately it does. Somehow after reloading the page from the history, the viewport height takes the whole screen device instead of the chrome interface itself. – Miglieto Dec 19 '20 at 09:41