White patches appear in the image, and website does not scroll to its full length, skrollr js mobile parallax issue

Question

All below issues are while accessing through mobile.

I have used skrollr js for one of my client. There are 4 parallax section in all. The first two images work perfectly, but the third is little blank and last one is almost half blank at times(white patches).

Along with this issue the website does not scroll to its full length.

To elaborate more:

img1 : the white patch visible. and it is not constant, at times the complete image appears, at times it does not

img2: The website could not be scrolled below the shown section.

The Javascript which i am using is :

var s = skrollr.init({
    edgeStrategy: 'set',
    smoothScrolling: false,
    mobileDeceleration: 0.004,
    forceHeight: false

  });

  skrollr.menu.init(s, {
    change: function(hash, top) {
    console.log(hash, top);
  },
    updateUrl: false,
    animate: true,
    easing: 'sqrt',
    duration: function(currentTop, targetTop) {
      return 500;

    },      
  });

Answer 1

After searching a lot I found a link which took me close to what i was missing .

Scrolling height bug using skrollr.js on safari ios7

The above link helped to figure out that I should write my skrollr initialisation code inside :

$(window).load(function() { });

Instead of

$(document).ready(function() { });

This solved my both the issues.

Thank You.