3

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

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 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;

    },      
  });
halfer
  • 18,701
  • 13
  • 79
  • 158
Zee
  • 91
  • 1
  • 7
  • 1
    Questions that are basically just links to an external site are, unfortunately, off-topic. The related close reason reads: "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**". – halfer Jul 22 '16 at 21:19
  • 1
    Thank you for pointing this out. I have posted more details about the problem i am facing. – Zee Jul 22 '16 at 21:39
  • No problem. Your link is a "page not found" - is that what you want readers to look at in relation to this question? – halfer Jul 24 '16 at 21:49
  • Hello Halfer, I solved the issue late night yesterday, and moved the website to the new link. earlier it was on the test link. have updated the same in the question just now. – Zee Jul 25 '16 at 06:56
  • 1
    OK, since the problem is now fixed, the link will no longer demonstrate the problem at hand - this is the problem with external links. I've removed it. You have enough detail in the question to avoid it closing - and thanks for providing and answer. – halfer Jul 25 '16 at 07:25

2 Answers2

0

I'm not sure if this will fix your issue or not but the developer tools is telling me you have an error with your meta viewport.

You should be using commas not semi-colons;

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
NosNits
  • 92
  • 6
  • I see you got your issue fixed. Was it a problem with the viewport like I suggested? – NosNits Jul 22 '16 at 20:40
  • Hello, i made the changes to viewport. btw the issues is not yet solved. at times it shows a complete page. At times it does not, like on ipad it was showing entire page untill now and randomly now it is not . not able to pinpoint exact reason. – Zee Jul 22 '16 at 21:00
0

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.

Community
  • 1
  • 1
Zee
  • 91
  • 1
  • 7