iOS page cutoff

[dwkoss]

I'm running into an issue in safari in iOS where the page gets cut off at a random point. Has anyone else seen this issue before? Here is a link to the site that I've been putting together : http://jennaparysek.com/

Thanks!

[Prinzhorn]

The only issue I have without your site in a gap at the bottom of the page (iOS 7.0.6 on 4s). But there's nothing cut off.

[paskainos]

@dwkoss: I had the same issue with the 'arbitrary cutoff'. The trick is to use keyframes to tell Skrollr where the end of #skrollr-body content is. You've obviously discovered this too, it seems. However, in this case, I'd suggest using a keyframe reference for #bottom, instead of the existing #bottom + .gap reference. That should eliminate the extra 100% viewport height currently at the bottom of mobile. Here's a more verbose explanation in case it's of any help.

[Twansparant]

It's probably caused by images (or other content) that are not loaded yet, which results in a smaller document height on init. Try wrapping the skrollr refresh function in the imagesLoaded callback:

$('#skrollr-body').imagesLoaded(function() {
   s.refresh();
});

https://github.com/desandro/imagesloaded

[paskainos]

@Twansparant this particular issue is unrelated to content not yet being (fully) loaded. In testing (and in production) I used imagesLoaded, but that didn't resolve the issue. I even went so far as to (pre)set the height of each #skrollr-body > div prior to skrollr execution, but again to no avail. For more info take a look at my other, more detailed comment, along with the example I created to reproduce the issue - which you'll notice doesn't use image size as a means of determining container height for any of the #skrollr-body > div containers.

[ocombe]

Thanks @Twansparant it fixed the issue for me !

[bierik]

Same issue here. This fixed the issue for me.

$(window).on('load', function() {
    skrollr.init({ forceHeight: false })
}

This fix also tends to that not all images are fully loaded yet. The height which is being cut off equals the image height in the header. Sry but it's not possible for me to give you an example.

[Christin10-10m]

Thank you @bierik! Your fix worked perfectly for me and also fixed the issue of the images not being fully loaded.