#StackBounty: #javascript #html #css #webkit #chrome-ios Chrome on iPhone overflows content on empty page (on new tab only, not reload)

Bounty: 200

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:

New page / tab on Mobile chrome

After page reload

Things I have tried (none of them worked):

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?


Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.