Mobile Safari height wrong with address bar and tabs

[MickL]

The height of a section is not set correctly on iOS Safari. You may try this out in Xcode Simulator. For example on iPhone 7 Plus the height of the viewport (without toolbar) is 370px, but the fullpage.js height of a section(set by $(window).height()) is 414px which includes the toolbar(address bar).

To show this i added a header and a footer which are positioned absolute (top:0 / bottom:0).

Initial:

Using $(window).scrollTop(1000):

A solution would be to use window.innerHeight. Interestingly it gives 414px (height with toolbar) on start, but with a timeout of 50ms it gives 370px (correct height without toolbar):

1. Replace all $(window).height() with window.innerHeight
2. Add a timeOut:

setTimeout(function () {
        $('.section').css('height', window.innerHeight + 'px');
        $(window).scrollTop(0);
    }, 50);

3. Additionally we need to listen for window changes. For example on rotation sometimes the toolbar gets hidden. Or if the toolbar is hidden and we tap into top screen and the toolbar shows. Or when opening a new tab in iPhone Plus Landscape or on rotation:

$(window).on('resize', function() {
        $(window).scrollTop(0);
        $('.section').css('height', window.innerHeight + 'px');

        // Additional timeOut for iPhone Plus in landscape with multiple tabs opened
        setTimeout(function() {
            $('.section').css('height', window.innerHeight + 'px');
            $(window).scrollTop(0);
        }, 400);
    });

I added an additional timeOut within the on resize which only affects iPhone Plus with multiple tabs opened(tab bar visible). In this case again window.innerHeight is wrong until an amount of time. 400ms was the minimum i discovered.

With this 3 changes the height stays always perfect.

If not using the option verticalCentered: falsethe height changes needs to be done to .fp-tableCell, too.

[alvarotrigo]

If you find a proper solution feel free to create a PR and I'll review it.
First of all, for what kind of initialisation is the proposed solution? autoScrolling:false? scrollBar:true?

This topic has been treated multiple times, some people suggesting innerHeight, others outerHeight...
None of them ended up convincing me and none of them were fully tested in all devices/OS.

Moreover, this address bar behaviour changes depending on the browser, its version and OS. For example. iPhone 4 or 5 and users have a different behaviour.

Lets not forget also about portrait vs landscape. The latest safari in iPhone 7:

• Won't show the address bar on landscape when coming from a portrait mode.
• Will show it when accessing directly
• Will show it when coming from landscape mode if the cursor was on the address bar
• And of course, it will only show the top address bar, unlike iPhone 4 that will show both top and bottom.

And this is just one single browser in one single OS. I'm sure others might have their funny behaviours too.

I see also you are talking about scrollTop. I guess you were using autoScrolling:false?
This is another point to take into account. The browser (safari) will behave differently depending if you use scrollBar:true or autoScrolling:false (or the responsive mode gets fired), or if you use autoScrolling:true.
The 1st cases will fire the scroll event and the 2nd won't. Which causes the hiding or showing of the scroll bar while scrolling.

And again, when firing the scroll event:

• The address bar gets minified (not hidden) when scrolling down
• The whole address bar is shown again when scrolling up quickly
• A minified address bar is shown when scrolling up slowly

Regarding your pictures, simulators might not be accurate. Can you please use a real device or a connection to one from sites such as browserstack.com. And when doing so, specify the version of iOS you are testing it in?

[MickL]

Hey,

a PR may be appropriate but i don't have the time familiarize with all of fullpage.js right now.

The behavior is not fixed to any setting like autoScrolling:false. It is just a fact that the height of a section (which should be 100% height of viewport) is wrong on any iOS device. In my case i needed to have perfect height to position absolute elements(without using position: fixed which is buggy on iPhone Plus).

I tested my approach on all iOS devices: iPhone 5, 6, 6 Plus with and without tabs. iPhone 5 for example has a exclusive bottombar. Also i tested rotating, adding/removing the tab bar, etc and it seems to work perfectly. This covers all points you mentioned.

I added scrollTop(0) because when you rotate sometimes the iPhone removes the toolbar and leaves a little scroll on the body so it needs to be readjusted to 0. Also the Simulator is very accurate if not 100% like a real device. The OS i used was 10.1.

As I described innerHeight is not always perfect unless using a timeOut. I added fixes for this and an additional fix for iPhone x Plus with toolbar which needs an additional timeOut.

[MickL]

I figured out that the window doesn't always gets updated when the tab-bar comes in/gets removed until a scroll happens. Therefor no resize-event is fired. I needed to add a setInterval using $(window).scrollTop(-1); which updates window if tab-bar came in. I don't see any disadvantages in other browsers. This interval is probably not what you want in your project, but it is the only way to detect and update the real height of the viewport on Mobile Safari.

I tested on iPad Air 2, iPhone 7 Plus (Simulator) and on a Android Marshmallow Phone in Chrome and default browser.

My final script looks like this:

    var height = window.innerHeight;
    var a = setInterval(function() {
        $(window).scrollTop(-1);
        resize();
    }, 500); // Don't lower more than 500ms, otherwise there will be animation-problems with the  Safari toolbar

    $(window).on('resize', function() {
        resize();
    });

    var resize = function() {
        if(window.innerHeight != height) {
            height = window.innerHeight;
            $('.section').css('height', height + 'px');
        }
    };

[MickL]

Just to clearify this:
If you open fullPage.js website on iPhone 7 Plus the section height is set to 414px. But if you type window.innerHeight into console it is 370px without tab-bar and 337px with tab-bar which is the actual viewport. Also verticalCentered: true will not be perfectly centered cause of the wrong height.

[alvarotrigo]

If you open fullPage.js website on iPhone 7 Plus the section height is set to 414px. But if you type window.innerHeight into console it is 370px without tab-bar and 337px with tab-bar which is the actual viewport. Also verticalCentered: true will not be perfectly centered cause of the wrong height.

The site looks good in the demo page as you can see in this screenshoots taken from an iPhone 7:

[alvarotrigo]

I'll mark it as "Reproduction required" as I got no way to reproduce this issue so far.

[MickL]

Sorry I dont have the time to make an live example. I describes every condition and behavior as far as i could.

[MickL]

My fix is also live, field tested and covers all iOS devices if anyone needs to have perfect container heights even after rotating etc.

[Oblik-Design]

same issue here, MickL is right. Innerheight is a safer way in any case.

[MickL]

window.innerHeight is good. But it doesn't delivers the right value from the start. Also following cases change the viewport:

• After Rotation
• Statusbar visible
• Statusbar collapsed (on scroll)
• Bottombar (iPhone 5)
• Tabbar visible (iPhone x Plus)

The problem is that the viewport, readable by window.innerHeight, does not update immediatly. And in some cases it doesn't update at all until there is a scroll (e.g. when the tabbar comes in). Thats why i added all those fixes, timeouts and scrolling to fix all of those problems and different behavior of devices.

If you still dont believe me, here is the proof:

Just open Simulator and try out something. Also you will notice that if you type in window.innerHeight it is the right height while .section and .fp-TableCell is wrong.

Btw. this is the same for pagePiling.js

Maybe i write a blog post about this if i got the time. Also i could write a little script that always gives the right height and you can subscribe to viewport-changes.

[Oblik-Design]

Well it messes up everything on ipad and iphone, maybe, on scroll, change orientation, have the innerheight recalculated, have a look,
www.oblikdesign.com/virgiTest