Mobile Safari returns wrong height in landscape mode

[daviddelusenet]

Description

When loading FP on an iPhone in landscape mode the wrong height gets set on all of the FP sections. The height of the screen is being used (375 pixels on an iPhone 6) instead of the corrected height without the address bar.

I'm experiencing this issue on an iPhone 6 running iOS 10.2.1. Following are some screenshots to illustrate the behaviour I'm experiencing. I'm using the Ghostlab software to inspect the DOM and to check what exactly is happening.

First I load the FP website in portrait mode:

So as you can see, the window height is 559 pixels, which is equal to the height of the FP sections. So this behaviour is correct.

After that, I turn my device to landscape mode:

As you can see here, the window height is 375 pixels, same as the FP sections height. So also this behaviour is correct.

After that, I press the top of my screen to show the address bar:

The window height gets updated to 331 pixels but FP doesn't update the height of the sections. Also refreshing the page in landscape mode (and having the address bar visible the entire time) still doesn't set the wrong height. So this behaviour is wrong.

Steps to reproduce it

1. Open Safari on an iPhone running iOS 10.
2. Open http://alvarotrigo.com/fullPage/ in landscape mode.
3. See the wrong height being set.

Versions

• iPhone 6.
• iOS 10.2.1.

If you need any more information don't hesitate to ask.

[alvarotrigo]

Thanks for the detailed explanation.
It seems you already posted it in a related topic #2414

Dealing with address bars in mobile devices is not easy. Each device and browser acts in a different way and it seems to be even more complicated yet when trying to solve the same problem in the two different scenarios fullpage.js provides:

• Using native scrolling (with scrollbar)
• Hijack scrolling (with no scrollbar)

I would suggest you to get rid of the autoScrolling behavior in small screen devices by using the responsiveWidth and responsiveHeight options. This way, users will be able to use the native scrolling behavior and you won't suffer from height related issues in the same way.

[daviddelusenet]

Thanks @alvarotrigo for your quick response.

The website on which I'm using the FP library I specifically designed to use the FP functionality on smaller screens. You can check the website out here: http://www.momkai.com/

So on desktop you've a 'normal' website and on mobile it goes to the FP setup. So using the native functionality isn't an option for me.

I'll just pray this gets fixed any time soon!

[alvarotrigo]

This should be now fixed in v4! 👍