Skip to content
This repository has been archived by the owner on Jan 24, 2018. It is now read-only.

Content cutting off early on mobile browsers #576

Open
emmills3 opened this issue Jul 31, 2014 · 11 comments
Open

Content cutting off early on mobile browsers #576

emmills3 opened this issue Jul 31, 2014 · 11 comments

Comments

@emmills3
Copy link

On multiple mobile and tablet devices my website is getting cut off early. The cut off point seems arbitrary and varies from device to device. The desktop browser are fine, it only seems to occur on mobile devices.

Tested on iOS and Droid devices.

http://staging.awpserver.com/mdlobbyist.com/markup/

Thanks
@Prinzhorn
Copy link
Owner

Can't reproduce since you're not initializing skrollr on mobile. Also this probably belongs to http://stackoverflow.com/

@emmills3
Copy link
Author

emmills3 commented Aug 5, 2014

I turned it off because it was problematic. I've since turned it back on and tried some other hacks, but nothing definitive. I will repost in stackoverflow.

http://staging.awpserver.com/mdlobbyist.com/

@paskainos
Copy link

I'm experiencing the same issue. @emmills3, it appears you've solved the mystery. Is that correct?

@emmills3
Copy link
Author

emmills3 commented Aug 6, 2014

I wouldn't say "solved", but I came up with a hack...

Rather than have my last content section end with id="done" (this is what was getting cut off), I created a new final content section with a blank image and no content. On the desktop, display:none and an empty div displays correctly. However, on mobile, I get a lot of extra space at the bottom of the scroll. The size varies: on my iPhone its about 50% of the height, on the iPad its about 100% of the screen, and on the Galaxy its 100% screen size of extra space.

Try this url: http://staging.awpserver.com/mdlobbyist.com/about-the-firm/ on a mobile device and scroll to the very bottom to see extra blank space.

Not an ideal solution, but it works.

@paskainos
Copy link

@emmills3, I saw the link in your original post and noticed (subsequent to the fix, and prior to your response) it appeared 'fixed' which was why I inquired. I too was encountering the 'arbitrary cutoff' issue. After an embarrassingly long investigative process, I realized / deduced relative mode is keyed to keyframes (duh) - thus, it must be 'told' (i.e. keyframe) where the 'end' of content (within #skrollr-body) is located.

This is why the cutoff appears arbitrary, as you pointed out, since no keyframe identifies the end of content within #skrollr-body and Skrollr uses this method to quantify #skrollr-body content (and thus calculate size). Once I realized this, I inserted a keyframe for the 'end' (i.e. last content container relative to the parent #skrollr-body) of #skrollr-body content and voilà - fixed!

You can see examples of this concept at work on this site: mojo-lab.com. The home page, the staff page(s) (template), and the client page(s) (template) all use this method to indicate to Skrollr 'end' of page (i.e. #skrollr-body) content. @Prinzhorn, please let me know if I've missed or misrepresented any info.

@who519
Copy link

who519 commented Aug 17, 2014

@paskainos I am having this same issue, can you go into a little more detail about where to add the keyframe, and how you did it. I was firebugging your pages but didn't see the markup as I thought you were describing. Is it a style you added to your own style sheet, or did you add it to the js file?

@paskainos
Copy link

@who519: in this case it's probably more helpful to view source rather than firebug it, since firebug displays rendered page code, whereas in this case you want pre-rendered code (i.e. before skrollr's alterations & markup). I created a simplified example of the remedy using a clone of @Prinzhorn's classic parallax example. You can check out the example here. Hope that helps. Best of luck!

@littletinyfish
Copy link

I think I had a variation on this problem, where skrollr would start somewhere in the middle of my article, and then add some kind of padding/margin to the bottom that seemed equal to the distance it started from the top. So instead of seeing the page arbitrarily END somewhere (as the OP mentioned), mine arbitrarily STARTED somewhere.

My fix (thanks to the assist from @paskainos, above) was simply to add an empty data-bottom attribute to the last parent div inside the #skrollr-body. (Or, depending on what your html cleaner strips out, data-bottom="".)

It doesn't appear require any CSS styling beyond that.

So something like:

<body>
   <div id="skrollr-body">

      <div class="parent-div-1">
            <div class="child-div-1"></div>
            <div class="child-div-2"></div>
      </div>

      <div class="parent-div-2" data-bottom>
            <div class="child-div-1"></div>
            <div class="child-div-2"></div>
      </div>
   </div><!--/#skrollr-body-->
</body>

EDIT:

Actually, upon further testing, I was still getting some issues when flipping from portrait to landscape mode. So instead of finding the last parent div, I added data-top and data-bottom (or, where necessary, data-top="" data-bottom="") to the #skrollr-body element. This gets me an accurate top AND bottom.

<body>
   <div id="skrollr-body" data-top data-bottom>
       Your content here.
   </div>
</body>

This appears to work for me in:
Windows 7: Chrome 39 | Firefox 34 | IE 11
iPhone: iOS Safari 8.1.2

@paskainos
Copy link

Wow - that's interesting stuff! Thanks @littletinyfish for sharing the results of your investigation. I'm interested to check this out! :)

@SimonFricker
Copy link

Has anyone found a resolution to this issue?

@3nki
Copy link

3nki commented Jun 17, 2015

i had this issue on mobile (iOS) in Chrome, in Safari Skrollr doesn't even load. for Chrome, i added this code at the end of my HTML where it loads Skrollr and it shows the full document height now:

var s = skrollr.init({
  forceHeight: false
});
skrollr.menu.init(s);

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@paskainos @Prinzhorn @who519 @littletinyfish @3nki @SimonFricker @emmills3