Extra white space at bottom, not padding, or margin, in Safari, what is it?

Question

I am working on a project for a website, and I have come across a strange error.

The Build and the Problem

My website I'm building contains transitions, and slide up effects, which look and work as they are supposed to. They work properly everywhere else until you hit Safari and Safari IOS on the iPhone. What happens then is as you scroll down there is this tremendous amount of white space at the bottom of the screen it is neither padding, nor margin that can be identified by the inspector. So I'm a bit lost.

Attempted Fixes

I have googled this issue and search around, and found a few things, but they do not work.

My first attempt was:

*{
    -webkit-padding-end: 0 !important;
}

nothing... Then I tried

html, body{
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

It looked promising but again nothing. So I am at a loss.

To see the issue first hand please visit this link:

http://main.test.supportworks.com

make sure you visit on safari or an iphone. Your scroll speed does not matter, so once you get to the bottom, you'll see what I mean.

I thank you ahead of time for any assistance!

Answer 1

Would most likely have to do with window height being referred to incorrectly in Safari on mobile. Try setting the height dynamically, using window.innerHeight with some js, instead of resorting to height: 100vh or 100%. Fix: https://github.com/alvarotrigo/fullPage.js/issues/2414