On IOS Chrome, the body overflows on a new tab or page with no content, but if the page is reloaded, the problem is fixed. It poses a problem for any element positioned at the bottom (absolute or fixed). Here is the code to reproduce the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>* {
box-sizing: border-box;
}
html{
height:100%;
}
body {
height:100%;
background-color:yellow;
margin:0 0;
border: 30px solid red;
}
</style>
</head>
<body></body>
</html>
The border should be shown all around the viewport but is being hidden behind the bottom Nav bar. Here is the result from the code above:
Things I have tried (none of them worked):
- Removing "width=device-width" as described here: Empty HTML5 page still overflows and trigger scroll bars on mobile.
- Reload the page with JS. The problem is fixed when a user refresh the page by hand,not programmatically.
- Using transform to zoom in and out to force a refresh
I have tried for a week to find a workaround but to no avail. Any help would be greatly appreciated
Edit: My issue is different from HTML body not filling complete width on mobile devices as I don't have an issue with filling the body, I have an overflowing body issue and mobile chrome behaving differently on a new page as opposed to an existing page. The workarounds on the page didn't work for my issue
My question is the following: Can somebody find a way using css or JS for the HTML body to not overflow when a new page is opened using the code above?
I've reproduced your problem and might have found a solution. I've found this which I think causes your problem:
The article suggests that
In the comments they suggested to store the inner height in a CSS variable, refresh it every time the event
resize
ororientationchange
is fired and apply it to the html and body tags. In my tests that worked only partially. Accessing the page from a link withtarget="_blank"
worked fine, but refreshing or directly accessing the page would show the problem you described while accessing the page through a link. To fix that, I'm also updating the variable during theload
event. On my iPhone 6s and the latest Chrome App accessing the page by link or directly seem to work fine now. I hope this is what you are looking for: