Search code examples
skrollr

Skroller creating large empty space on mobile phones

I am using the skroller on a page. The page on mobile devices is showing a large space which is not scrollable after first time you scroll it. Visited so many websites offering solution, including StackOverflow and @Prinzhorn's own comments on the same, but some how I am unable to fix the problem on mobile devices (Android, iPhone). Here is HTML:

<div id="skrollr-body">
<div id="eidwish1" class="centered" data-300="width:100%; background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2000="width:0%; background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));"><h1 class="text-center heading2 wow fadeInDown" data-0="display:block;" data-1500="display:none;">This Eid send your loved ones...</h1></div>
<div id="eidwish2" class="centered" data-2000="width:100%;" data-2500="width:0%;"><h1 class="text-center heading2 wow fadeInUp" data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2500="background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">a personalized Greeting Card!</h1>
<div id="crescent" class="centered" data-1500="top:-100px;" data-2000="top:-200px;"></div>
</div>
<div id="ribbon-left" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<div id="ribbon-right" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px">
</svg>
<div id="pattern1" class="centered" data-2500=" height:100%; "data-3500="height:0%;"></div>
<div id="pattern2" class="centered"></div>
<div id="eidwish3" class="centered" data-4000="width:0px;height:0px; "data-5000="width:700px;height:700px;"></div>
<h1 class="text-center headerUp wow lightSpeedIn" data-0="display:none;" data-4000="display:block;"><img src="logo.png" alt="logo"/><span clss="toggle-green">THINK GREEN </span><span class="toggle-blue">PRINT GREEN</span></br><small><i>use "EID-2015" promo code when you checkout</i></small></h1>
<h1 class="text-center discount wow rollIn" data-0="display:none;" data-4000="display:block;">We are Giving Away 25% discount</h1>
<a class="button btn-success buy-now text-center wow jello" data-wow-iteration="10" data-wow-duration="3000ms" data-0="display:none;" data-4000="display:block;" href="Greeting Cards">See All Card Designs</a>
<a class="copyright" href="http://example.com">
<img src="http://example.com/logo.png" alt="logo"/>
<br>Copyright © example.com 2015-16</a>
</div>

This is JS:

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

and CSS:

html, body {padding:0;margin:0;
k}
body {overflow:auto; height:7600px; 
}
#skrollr-body {min-height: 1px; float: left; width:100%; height:100%; 
}
#skrollrk-body  div {overflow:hidden; position:absolute; 
}
.centered { top:0; bottom:0; left:0; right:0; margin:auto; 
}
#eidwish1 {background: #000 center center no-repeat ; z-index:5;
}
#eidwish2 {background: #000 url('wish2.png') center bottom no-repeat ; z-index:4; box-shadow: 0 0 0 20px #FF0000;  background-size: cover;
}
#crescent {width:100%; background:url('crescent2.png') no-repeat; margin-top:0px;
}
#pattern1 { background:url('wish3.jpg') ; z-index:2; background-attachment:fixed; background-size: cover;
}
.ribbon {background:#FF0000; height:40px; top:50%; margin-top:-20px; z-index:3;}
#ribbon-left {left:0
}
#ribbon-right {right:0
}
small { color: #fff;
}
svg {position:absolute; z-index:5; left:50%;  top:50%; margin-left:-170px; margin-top:-180px
}
#pattern2 { background:url('wish4.jpg'); z-index:1; background-size: cover
}
#eidwish3 {background:#FF0000 url('wish5.jpg') no-repeat center center; z-index:10; border-radius:50%;  background-size: cover
}

I am stuck on this for many days. I have read almost every thread about this and tried to do the same, but it doesn't solve my problem. Pleas help!

Solution

  • I'm exactly with you on this topic. Oh how I wish I could talk to somebody about skrollr. Here's a few things I've learned about Skrollr and Mobile:

    However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.

    How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

    • This is a pretty big deal. If for you both desktop and mobile Layout / Visual Viewports are same size, then you can make your website essentially functional in mobile using the touch system. It will look and function pretty much just like desktop scrolling.
    • If those viewports are hugely different widths, its a no go. I had a website controlled fully by heights, so I was out of luck. I ended up adding a few 'static' screens to the bottom of my page. I added two classes (.my_website_mobile and .my_website_desktop) I would display: block; or display: none; as appropriate. I wasn't happy doing that but it worked.
    • In mobile, a div with a background-image can not have background-position: fixed That will work great on a desktop browser mobile emulator tool but will fail terribly on a real mobile device. (hard lesson learned...)
    • Other functions likely to have odd performance on mobile: overflow, and visual viewport I used a lot of vw (Viewport Width) and vh (Viewport Height) heights instead of % for locations and sizes. Those make sense on desktop, not so on mobile.
    • Reminder, skrollr-body gets style="-webkit-transform: translate(0px, 0px) translateZ(0px); transform: translate(0px, 0px) translateZ(0px);" upon skrollr initialization.
    • If you are on a mobile device, then: <html class="skrollr skrollr-mobile" style="overflow: hidden;" > and <body style="overflow: hidden;"> after skrollr initialization.
    • If you are on a desktop device, then: <html class="skrollr skrollr-desktop"> and <body style="height: 12345px;"> after skrollr initialization.

    I haven't dug into your specific code, but if you want to talk more, contact me via email (check my profile...) I'm totally up for it. I need to change machines and my location before I am able to troubleshoot your code...