Skrollr adding white space

Question

I have tried everything. I am exhausted from reading 4-5 pages on google trying to find a fix that works for me. My problem is persistent even when I use the skrollr examples (not saying they did something wrong, I know I am just not understanding it right). So I have uploaded a demo to show this awkward white space ONLY on mobile devices. It works fine on desktop as you will see if you try.

What have I tried?

-setting forceHeight to false via:

skrollr.init({
    forceHeight: false
});

-setting forceHeight to false via skrollr function

_forceHeight = options.forceHeight = false;

(originally it was _forceHeight = options.forceHeight !== false;)

-I have tried to find any other working mobile parallax example and have yet one.

-I tried to mess around with 'data-xxx' (x as an integer) to see if that was the problem (read from the inventor of skrollr that you need to do that sometimes).

Nothing has worked. I am eternally grateful for any help provided, for this has been an extremely frustrating past 48 hours.

Live Demo (if you can try to view on mobile to see my problem, if you view it on dekstop browser you will not see what I am talking about)

I didn't want to post my site because it is for a client and they may not want people to see it yet, but I did have the SAME problem with an example provided by the zip file. Here's the HTML..

HTML

<div
    class="parallax-image-wrapper parallax-image-wrapper-100"
    data-anchor-target="#dragons + .gap"
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-100"
        style="background-image:url(images/kitteh1.jpg)"
        data-anchor-target="#dragons + .gap"
        data-bottom-top="transform: translate3d(0px, -80%, 0px);"
        data-top-bottom="transform: translate3d(0px, 80%, 0px);"
    ></div>
    <!--the +/-80% translation can be adjusted to control the speed difference of the image-->
</div>

<div
    class="parallax-image-wrapper parallax-image-wrapper-100"
    data-anchor-target="#bacons + .gap"
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-100"
        style="background-image:url(images/kitteh2.jpg)"
        data-anchor-target="#bacons + .gap"
        data-bottom-top="transform: translate3d(0px, -80%, 0px);"
        data-top-bottom="transform: translate3d(0px, 80%, 0px);"
    ></div>
</div>

<div
    class="parallax-image-wrapper parallax-image-wrapper-50"
    data-anchor-target="#kittens + .gap"
    data-bottom-top="transform:translate3d(0px, 300%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-50"
        style="background-image:url(images/kitteh3.jpg)"
        data-anchor-target="#kittens + .gap"
        data-bottom-top="transform: translate3d(0px, -60%, 0px);"
        data-top-bottom="transform: translate3d(0px, 60%, 0px);"
    ></div>
</div>

<div id="skrollr-body">
    <div class="header" id="dragons">
        Skrollr demo of classic parallax sections. Degrades without JavaScript (could be disabled on mobile without breaking everything).
    </div>
    <div class="gap gap-100" style="background-image:url(images/kitteh1.jpg);"></div>
    <div class="content" id="bacons">
        <p>Landjaeger chicken ham fatback sausage hamburger, tri-tip capicola pastrami pancetta ribeye turducken. Rump shank turkey pig kevin sausage meatloaf tenderloin drumstick short ribs short loin. Prosciutto spare ribs chuck, pork strip steak pork chop swine bacon turkey shoulder andouille. Jowl landjaeger chicken corned beef. Ham hock kielbasa pancetta ground round sausage. Spare ribs porchetta pastrami filet mignon drumstick ball tip. Beef ribs prosciutto kevin, landjaeger shoulder ham hock ham brisket sirloin chuck t-bone drumstick kielbasa pork chop.</p>

        <p>Landjaeger spare ribs chicken ball tip, filet mignon frankfurter ribeye tenderloin corned beef. Strip steak boudin pork loin, chicken turkey ball tip beef ribs ground round shank ham hock. Kevin capicola beef, chuck pork chop shoulder brisket doner meatloaf shank ham hock tenderloin. Chuck ham hock short ribs ground round sausage prosciutto shoulder bacon andouille tri-tip beef biltong filet mignon chicken. Pork belly andouille shank, bacon sausage meatloaf bresaola pork chop short ribs t-bone. Ham hock salami porchetta bacon beef turkey, strip steak kielbasa pancetta brisket meatball t-bone.</p>

        <p>Chicken pancetta capicola chuck, turkey meatball jerky frankfurter kielbasa ball tip bacon ground round. Beef ribs brisket meatloaf short ribs landjaeger shankle spare ribs sausage, pancetta swine sirloin flank. Tail shank chuck pancetta, ham meatloaf short ribs sausage rump turkey kevin pork chop landjaeger. Doner boudin short ribs t-bone, jerky shankle bresaola drumstick. Strip steak shank spare ribs boudin doner short ribs. Boudin prosciutto jowl tenderloin tongue beef ribs, short ribs salami short loin strip steak ham jerky. Shank pancetta beef ribs, corned beef ham hock pork belly drumstick tail bresaola chuck.</p>
    </div>
    <div class="gap gap-100" style="background-image:url(images/kitteh2.jpg);"></div>
    <div class="content" id="kittens">
        Here be kittens
    </div>
    <div class="gap gap-50" style="background-image:url(images/kitteh3.jpg);"></div>
    <div class="content" id="done">
        Images from <a href="http://placekitten.com/attribution.html">http://placekitten.com/</a>, thanks!
    </div>
</div>

<script type="text/javascript" src="../dist/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init({
    forceHeight: false
});
</script>

At this point another avenue of help for me would be if anyone knew any other mobile-enabled parallax templates that I can either download or buy. My client just wants some type of parallax scrolling background images on his site, if I need to buy a template they said that was fine. However this one works and the only thing wrong with it is the annoying white space that shouldn't be there.

Is there white space for you on this page as well? http://prinzhorn.github.io/skrollr/examples/classic.html — Prinzhorn, Jul 19 '14 at 09:29
I think so. although it has a lot of white space on desktop as well so either it's doing what I am describing on desktop and mobile. I think I just took that, shrinked the last slide to test and it gave me the extra white space. I made the height of #done to 20% instead of 100%, could that be my issue? — user3746995, Jul 19 '14 at 20:02
I must say though when I set forceHeight to false using @marco del valle's suggestion, it doesn't let me scroll anymore on mobile, but for a split second or so when the page loads it lets me scroll and it LOOKS like it solves the problem but it doesn't let me scroll after that second (brings it back to first slide and locks). — user3746995, Jul 19 '14 at 20:05

score 3 · Answer 1 · answered Jul 18 '14 at 05:43

3

Yes, I see the issue on my iPhone. I'm looking at the source code on the Live Demo you linked to, and you're not using forceHeight: false as you claim to be. It reads:

<script type="text/javascript">
skrollr.init({
    smoothScrolling: false,
    mobileDeceleration: 0.004
});
</script>

Try changing it to:

<script type="text/javascript">
var s = skrollr.init({
    forceHeight: false,
    smoothScrolling: false,
    mobileDeceleration: 0.004
});
</script>

answered Jul 18 '14 at 05:43

M -

26,908
11
49
81

yeah i may have not done it in that example, thought i did, but i have like 3 of them trying different things. When I implemeet your code into the demo I gave it no longer lets me scroll on the iphone. i'm going to look into this, so hopefully you gave me a good step in the right direction. – user3746995 Jul 18 '14 at 15:02
Also reason it wasn't in the html file, i set forceHeight to false in the srollr function itself //forceHeight is true by default _forceHeight = options.forceHeight = false; if(_forceHeight) { _scale = options.scale || 1; } – user3746995 Jul 18 '14 at 15:08
update: weirdest thing happened, i refreshed the page on my mobile and for a second it let me scroll and it LOOKS like it solved the problem but as soon as the page loaded it didnt let me scroll anymore. – user3746995 Jul 18 '14 at 15:10
Maybe you could change the height of the `` manually on mobile devices via CSS after skrollr has been initiated? CSS: `.body-fixed{height: 2000px; overflow: hidden;}` and JS could say something like: `if([mobile device detection]) {$('body').addClass('body-fixed');};` – M - Jul 18 '14 at 17:30

score 3 · Answer 2 · answered Feb 25 '15 at 09:42

3

I added this to my CSS and the white space gets kicked out the door. Bingo!

height:100%!important; /* Fix to prevent skrollr setting incorrect height */

answered Feb 25 '15 at 09:42

user1432315

119
2
12

I had ```height: 100%``` applied to html, body and a page wrapper as a way to keep my footer at the bottom. Adding ```!important``` to those rules overrides the height value that Skrollr is adding to ``````, which seems to be too large for whatever reason. – Lauren Aug 11 '15 at 13:11

score 2 · Answer 3 · answered Jan 13 '15 at 19:20

Old thread, but I was having the same issue for a long time and wanted to share my solution. Check your stylesheet to see if you have a height:100% set to the body/html. In my case I did, and as soon as I removed that parameter the issues completely went away.

Skrollr adding white space

3 Answers3

Linked