Is this a mobile Safari bug? White space appears at bottom after rotating iPhone

smirk

macrumors 6502a
Original poster
Jul 18, 2002
675
47
Orange County, CA
Hi, I'm encountering a really strange issue that I've tracked down to only occurring in iOS Safari starting with iOS 12.2.

The issue is this. When you first bring up a web page that specifies a height of 100% on the iPhone, it looks fine. Rotate it to landscape and it also looks fine. When you rotate it back to portrait, the bottom of the usable content shrinks up the page a little, leaving a white space at the bottom. There doesn't seem to be any way to place content there, it's as if Safari thinks the physical window is shorter than it is. The height of the white space also seems to add up to the height of the URL and navigation bars, if they were showing.

I put an example here: https://noderun.com/run/jeff/possible-ios-safari-bug/
Code is here: https://noderun.com/ide/jeff/possible-ios-safari-bug/

(NodeRun.com is like CodePen)

Is this a known issue? It seems like if it were a Safari bug that this would happen all over the place.

Here's the page before and after rotating:
IMG_3319.PNG IMG_3318.PNG


Thanks!
 

olup

macrumors 6502
Oct 11, 2011
377
36
I've had issues with IOS Safari with stuff like this, so it's probably a bug. You could try to account for the 45 - 50px gap, roughly the height of the bottom bar of safari, on the bottom by adding a scroll event listener once it gets to that threshold and remove/add the height of that gap.
 

smirk

macrumors 6502a
Original poster
Jul 18, 2002
675
47
Orange County, CA
I've had issues with IOS Safari with stuff like this, so it's probably a bug. You could try to account for the 45 - 50px gap, roughly the height of the bottom bar of safari, on the bottom by adding a scroll event listener once it gets to that threshold and remove/add the height of that gap.
How would you do that? In my tests, offsetHeight is being returned with the wrong (artificially short) value. Is there another way to get the actual height?

Thanks!
 

olup

macrumors 6502
Oct 11, 2011
377
36
you mean the actual height of the bottom bar? I've always taken screenshots of Safari and measured the height of the bottom bar on window load. Have a look at the Intersection Observer API. There's something called root margin, which is the margin around the root element that you're checking against.
 

lololissimo

macrumors newbie
Feb 3, 2020
1
0
I’ve stumbled upon exactly the same problem. What I don’t understand is how come this is the only report I could find. Any height:100% div in a height:100% body would do that! Did you manage to overcome it, @smirk?
 

olup

macrumors 6502
Oct 11, 2011
377
36
I’ve stumbled upon exactly the same problem. What I don’t understand is how come this is the only report I could find. Any height:100% div in a height:100% body would do that! Did you manage to overcome it, @smirk?
Take a look at my post above yours, where I've linked to the intersection observer on MDN. I don't think there's a plain CSS solution to this. What would need to happen is that you set the observer to an onscroll event, where the 50px from the navigation bar is subtracted once the page is loaded and re-added once the scrolling starts. I hope this will help.
JavaScript:
let options = {
    // the parent element, in this case the body, which should get an ID of body or similar
    root: document.getElementById("body"),
    // the bottom margin equivalent to the height of the navigation bar at the bottom of IOS safari
    rootMargin: "0 0 50px 0",
    threshold: 1
}

// initialize intersection observer
let observer = new IntersectionObserver(callback, options);
 

smirk

macrumors 6502a
Original poster
Jul 18, 2002
675
47
Orange County, CA
I’ve stumbled upon exactly the same problem. What I don’t understand is how come this is the only report I could find. Any height:100% div in a height:100% body would do that! Did you manage to overcome it, @smirk?
Hi, I stopped working on this issue for awhile but now I'm back looking at it. It is affecting all of our mobile apps. I also don't understand why reports of this aren't more widespread. I'll keep you updated if I discover a work around.

I would recommend you use an alternate browser. I am not a fan of safari :)
That's not particularly helpful, although I thought the same thing. But we can't tell our customers to install and use a different web browser just for our app.
- - Post merged: - -

Take a look at my post above yours, where I've linked to the intersection observer on MDN. I don't think there's a plain CSS solution to this. What would need to happen is that you set the observer to an onscroll event, where the 50px from the navigation bar is subtracted once the page is loaded and re-added once the scrolling starts. I hope this will help.
Thanks for your reply, but I'm not following you. What does scrolling have to do with it? What's happening is you bring up a page in portrait, then rotate the phone to landscape, then rotate back to portrait -- with or without scrolling along the way -- and then the layout gets all messed up. There is a section at the bottom of the screen that seems unusable and unreachable. Sometimes the height of this section seems to equal the height of the hidden browser control elements, but sometimes the height seems much larger than that. I don't have all my facts straight yet, but it's possible that iPhone X-class devices have taller unusable sections than iPhone 8-class ones.

So maybe you're onto something, but I'm not getting how scrolling fits into this.
 
Last edited:

olup

macrumors 6502
Oct 11, 2011
377
36
Hi, I stopped working on this issue for awhile but now I'm back looking at it. It is affecting all of our mobile apps. I also don't understand why reports of this aren't more widespread. I'll keep you updated if I discover a work around.


That's not particularly helpful, although I thought the same thing. But we can't tell our customers to install and use a different web browser just for our app.
- - Post merged: - -



Thanks for your reply, but I'm not following you. What does scrolling have to do with it? What's happening is you bring up a page in portrait, then rotate the phone to landscape, then rotate back to portrait -- with or without scrolling along the way -- and then the layout gets all messed up. There is a section at the bottom of the screen that seems unusable and unreachable. Sometimes the height of this section seems to equal the height of the hidden browser control elements, but sometimes the height seems much larger than that. I don't have all my facts straight yet, but it's possible that iPhone X-class devices have taller unusable sections than iPhone 8-class ones.

So maybe you're onto something, but I'm not getting how scrolling fits into this.
Sorry for confussion, I've actually only used that for scrolling events, but the concept would remain the same, but for an onload event instead. The orientation media query might also work though.
CSS:
@media (orientation: portrait) {
    body {
        height: 100%;
    }
}

@media (orientation: landscape) {
    body {
        height: calc(100% - 50px);
    }
}
 

smirk

macrumors 6502a
Original poster
Jul 18, 2002
675
47
Orange County, CA
So I did some experimenting, and setting body to height: 100vh; seems to be working so far. All its children are using a height of 100%, and so far so good. I'll keep playing with it.
 

smirk

macrumors 6502a
Original poster
Jul 18, 2002
675
47
Orange County, CA
Hey, I take it back -- it's not working with body set to height:100vh;. Doing that seemed to help when I used browser tools to change those properties when my phone had our app up, but I distilled it down to a very simple HTML page that exhibits the issue, and using 100vh doesn't affect it.

Viewing this page in iOS 13 shows the white space at the bottom after rotating to landscape and back.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test Page!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div style="position:absolute; padding:0px; margin:0px; border-width:0px; height:100%; width:100%; background-color:blue;">Rotate me</div>
</body>
</html>
 

coder7of9

macrumors newbie
Feb 20, 2020
1
0
I am still working on finding a solution, or refining this solution. This unappealing approach re-instates the correct height.

JavaScript:
    html{height:100%;}

    body{margin: 0;min-height:100%;height:100%;overflow:hidden;}



    window.addEventListener('resize', function() {

        if ( window.matchMedia("(orientation: portrait)").matches ) {

            document.getElementsByTagName("html")[0].style.height = "100vh";

            setTimeout(function(){

                document.getElementsByTagName("html")[0].style.height = "100%";

            }, 500);

        }

    });