Unexpected white space appears at the bottom of the page when rotating the device in iOS Safari

Question

Unexpected white space appears at the bottom of the page when rotating the device in iOS Safari

One issue I encountered on my website involves a meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This, combined with height:100%; on the html and body tags, causes problems when viewed on Safari (iOS 13.5.1). Specifically, when the device is rotated from landscape to portrait mode, a white space appears at the bottom of the screen that is not part of the HTML code.

A minimal example can be seen here: https://jsbin.com/cojabiquza

This issue seems to be related to Safari's behavior of hiding and showing panels during rotation, leading to a miscalculation of page dimensions. Removing the viewport meta tag resolves the problem, but this is not a viable solution for a responsive website like mine. The issue does not occur in other browsers.

If you have experience fixing this issue, please share your insights.

html css ios safari

Answer 1

Answer №1

@Jax-p's solution initially addressed the bug I was facing, however, it ended up causing another issue. The use of 100vh resulted in the content getting hidden behind the address bar, as shown in this https://i.sstatic.net/7caUo.png.

Consequently, I had to implement a series of workarounds in my actual application:

document.addEventListener('orientationchange', () => {
  document.documentElement.style.height = `initial`;
  setTimeout(() => {
    document.documentElement.style.height = `100%`;
      setTimeout(() => {
        // This particular line prevents the content
        // from being obscured by the address bar
        window.scrollTo(0, 1);
      }, 500);
  }, 500);
});

This temporary fix more or less resolves the issue on iOS Safari versions 12 and 13.

Answer 2

@Jax-p's solution initially addressed the bug I was facing, however, it ended up causing another issue. The use of 100vh resulted in the content getting hidden behind the address bar, as shown in this https://i.sstatic.net/7caUo.png.

Consequently, I had to implement a series of workarounds in my actual application:

document.addEventListener('orientationchange', () => {
  document.documentElement.style.height = `initial`;
  setTimeout(() => {
    document.documentElement.style.height = `100%`;
      setTimeout(() => {
        // This particular line prevents the content
        // from being obscured by the address bar
        window.scrollTo(0, 1);
      }, 500);
  }, 500);
});

This temporary fix more or less resolves the issue on iOS Safari versions 12 and 13.

Answer 3

Answer №2

After spending the majority of my day tackling this persistent "feature," I successfully devised a CSS-only solution that is compatible with iOS 14.4 on both iPad and iPhone, as well as all standard web browsers. What's more, no hacks are needed to implement it. The key lies in utilizing 100vh for the HTML and BODY elements, accompanied by applying position:fixed to the outermost wrapper element with its edges set to zero.

Please bear in mind that there may be a visual glitch when rotating the screen if the background color of your BODY differs from that of the wrapper. Interestingly, this same issue can be leveraged to customize the color of the address bar at the top by intentionally assigning a distinct background color to the BODY (though this step is optional).

HTML, BODY {
    height: 100%;
    width: 100%;
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;
    /* essential for preventing unwanted scrollbars */
    overflow: hidden;
    /* aesthetic tweaks: */
    background-color:#5AE;
}
#wrapper {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    margin:0;
  /* to enable normal content scrolling: */
  overflow: auto;
    /* aesthetic tweaks: */
    background-color:#AEA;
    border: #6B6 1em solid;
    box-sizing:border-box;
}

<html>
<head>
    <meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" />
</head>
<body>
    <div id="wrapper">
        Insert your content here.
    </div>
</body>
</html>

Answer 4

After spending the majority of my day tackling this persistent "feature," I successfully devised a CSS-only solution that is compatible with iOS 14.4 on both iPad and iPhone, as well as all standard web browsers. What's more, no hacks are needed to implement it. The key lies in utilizing 100vh for the HTML and BODY elements, accompanied by applying position:fixed to the outermost wrapper element with its edges set to zero.

Please bear in mind that there may be a visual glitch when rotating the screen if the background color of your BODY differs from that of the wrapper. Interestingly, this same issue can be leveraged to customize the color of the address bar at the top by intentionally assigning a distinct background color to the BODY (though this step is optional).

HTML, BODY {
    height: 100%;
    width: 100%;
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;
    /* essential for preventing unwanted scrollbars */
    overflow: hidden;
    /* aesthetic tweaks: */
    background-color:#5AE;
}
#wrapper {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    margin:0;
  /* to enable normal content scrolling: */
  overflow: auto;
    /* aesthetic tweaks: */
    background-color:#AEA;
    border: #6B6 1em solid;
    box-sizing:border-box;
}

<html>
<head>
    <meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" />
</head>
<body>
    <div id="wrapper">
        Insert your content here.
    </div>
</body>
</html>

Answer 5

Answer №3

When browsing on mobile devices, the address bar and controls menu are often hidden while scrolling or when switching between portrait and landscape mode. This can sometimes cause issues with using height: 100%; as the browser may not correctly recalculate percentage values (such as failing to account for the height of the address bar).

To ensure that your content fills 100% of the viewport height, it is recommended to use height: 100vh; (where vh stands for viewport height). Hopefully, this tip proves helpful for your development.

Answer 6

When browsing on mobile devices, the address bar and controls menu are often hidden while scrolling or when switching between portrait and landscape mode. This can sometimes cause issues with using height: 100%; as the browser may not correctly recalculate percentage values (such as failing to account for the height of the address bar).

To ensure that your content fills 100% of the viewport height, it is recommended to use height: 100vh; (where vh stands for viewport height). Hopefully, this tip proves helpful for your development.

Answer 7

Answer №4

check out this solution:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Answer 8

check out this solution:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Answer 9

Answer №5

In my quest to find a resolution to this issue, I stumbled upon this helpful blog post that provided the following solution:

window.onresize = function() {
    document.body.height = window.innerHeight;
}
window.onresize(); // calling this to initially set the height.

Answer 10

In my quest to find a resolution to this issue, I stumbled upon this helpful blog post that provided the following solution:

window.onresize = function() {
    document.body.height = window.innerHeight;
}
window.onresize(); // calling this to initially set the height.

Answer 11

Answer №6

This solution was a game-changer for me, especially when using my iPhone 15

@media (max-width: 799px) {

  main {
    overflow-x: clip;
    overflow-y: auto;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
  
  }

Answer 12

This solution was a game-changer for me, especially when using my iPhone 15

@media (max-width: 799px) {

  main {
    overflow-x: clip;
    overflow-y: auto;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
  
  }

Unexpected white space appears at the bottom of the page when rotating the device in iOS Safari

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

There are two directories for pods in Xcode. How can I delete one of them?

CSS will only be visible if it is enclosed within the <style> tag

Removing page scrolling in Bootstrap 5: A step-by-step guide

A guide on utilizing Python with Selenium to navigate to a specific field within a frame

Learn how to use the CSS transform-scale() function to scale text independently from its container while maintaining proper alignment

Gridview displaying varying border styles in CSS

The negative z-index is causing issues with my ability to select classes using jQuery

Troubleshooting directive not functioning properly with AngularJS ng-click

Including JavaScript in HTML Error 404

Sending a JSON request using Swift 3

Has jQuery UI Accordion taken over the design of unordered lists?

The pre-loader is hidden behind the block content and navigation bar

Is it possible to create a CSS checkbox without using an ID or "for" attribute

Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

What is the method for ensuring a p element is only as wide as necessary when it wraps within a parent div with a specified hardcoded width?

Activate hover event on UI-Grid for interactive display

Tips on how to maintain the underline when text is split into two sections

Adjustable height within embedded object tag

Challenges arise with the Boostrap grid system, overflow scroll functionality, and responsive design when incorporating specific heights (vh) in elements

Decoding JavaScript elements embedded in an HTML website