iOS: Locked scroll

[rachelnabors]

Hi there! I'm using skrollr with waypoints.js for a project. It works great on Chrome and Safari, but sadly, in iOS Safari, the screen "locks" (I believe someone has had this issue before). I'm presenting two instances of the same code in action for your observation.

The full project (click the rabbit hole to "fall into" the skrollr portion): http://rachelnabors.com/alice-in-videoland/book/

And just the hole sequence: http://codepen.io/rachelnabors/pen/AeEHw

Both exhibit similar symptoms.

Am I missing something, or is there a real issue here?

[Prinzhorn]

Read https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers

Unrelated: make sure to round these <div class="alice-falling" data-8289.5="top:-10%" data-22104.5="top:80%"></div>

[rachelnabors]

I do not understand. I'm already using #skrollr-body. Is it in the wrong place? Incorrectly used because Alice is fixed?

Rachel Nabors

---

I'm on an iPhone. This means I have little to no wifi access, battery power, and tiny buttons that send missives before I've the chance to spellcheck them. Please forgive any curt messages, typos, or long silences!

On Sep 5, 2013, at 2:12 AM, Alexander Prinzhorn notifications@github.com wrote:

Read https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers

Unrelated: make sure to round these

\ Reply to this email directly or view it on GitHub.

[Prinzhorn]

If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.

Which in turn means that fixed elements need to be outside of skrollr-body.

[rachelnabors]

I made the updates you suggested, but sadly, iOS is STILL frozen. Please see the updated pen here: http://codepen.io/rachelnabors/pen/AeEHw

Any ideas? I really love how this "feels" and want to use it!

[Prinzhorn]

I just see a blank screen in Chrome

[Prinzhorn]

It's now loading in Chrome, seems like the images server had issues.

I'm not able to use codepen on my iPhone and it crashed Safari.

[rachelnabors]

Are you able to look at it on an iPad? That is what I'm testing for and with.

Sent from my iPad

On Sep 6, 2013, at 5:30 AM, Alexander Prinzhorn notifications@github.com wrote:

It's now loading in Chrome, seems like the images server had issues.

I'm not able to use codepen on my iPhone and it crashed Safari.

— Reply to this email directly or view it on GitHub.

[Prinzhorn]

No, I don't have access do an iPad.

[rachelnabors]

That's unfortunate! But I only recently came into one myself, so I understand. I will not be using skrollr for the iPad portion of this project, then. (But this ticket should totally remain open.)

[Prinzhorn]

But this ticket should totally remain open.

agree. Maybe you can create a minimal test case (e.g. without images and fancy things).

[rachelnabors]

This is as stripped down as it gets: http://rachelnabors.com/alice-in-videoland/book/skrollr-test/

Hope that helps.

[Prinzhorn]

Just opened this on iPhone 3gs with iOS 6 and I can scroll just fine and the girl is animating down slowly.

[rachelnabors]

Back from the conference. Yes, I can confirm that http://rachelnabors.com/alice-in-videoland/book/skrollr-test/ is working on my iPad. However, I was unable to get the same code working in the more complicated production environment here WITHOUT turning off mobile support:

http://rachelnabors.com/alice-in-videoland/book/

With mobile support on, as soon as skrollr.init() is called, the page jerks to the top of the document and is un-scrollable.

I wonder if this is a problem with the transforms skrollr uses for mobile?

[rachelnabors]

(For reference, http://rachelnabors.com/alice-in-videoland/book/ has mobile support turned off currently. If you'd like to see it with it turned on, you can fork the repo here https://github.com/rachelnabors/alice-in-videoland/tree/master/book and make the change in js/script.js)

(Also, it loads on my iPhone 4S. Just takes long as hell!)

[Prinzhorn]

It's jumping to the top because skrollr sets overflow: hidden; on <html> and <body>.

This won't work the way you've set up everything. The upper part isn't wrapped in skrollr-body and is not scrollable on mobile.

[rachelnabors]

I tried wrapping th echo tents in skrollr-body but had the same frozen experience. How would you get it working?

Sent from my iPad

On Sep 10, 2013, at 6:49 AM, Alexander Prinzhorn notifications@github.com wrote:

It's jumping to the top because skrollr sets overflow: hidden; on and .

This won't work the way you've set up everything. The upper part isn't wrapped in skrollr-body and is not scrollable on mobile.

— Reply to this email directly or view it on GitHub.

[Prinzhorn]

How would you get it working?

I don't know. I'd probably have to spend hours trying to take your code apart which I can't.

Use Google Chrome and set the UA to a mobile browser. Then activate "Emulate touch events".

Now you can at least debug this yourself instead of having to use the iPad.

[zhe]

Check this out, this solution solved my problem,

    skrollr.init({          
        mobileCheck: function() {
            //hack - forces mobile version to be off
            return false;
        }
    });

from https://github.com/Prinzhorn/skrollr/issues/265#issuecomment-21426090

[georgedumontier]

That hack sort of works for me, but now when the user scrolls on the iPhone the animations don't work until the user is finished scrolling and takes their finger off the screen. Then the animations jump into place. Any tips to smooth it out?

[Prinzhorn]

when the user scrolls on the iPhone the animations don't work until the user is finished scrolling and takes their finger off the screen

That's the only reason there's a "mobile mode", because Safari pauses JavaScript (https://github.com/Prinzhorn/skrollr#the-problem-with-mobile-and-the-solution)

[codedcontainer]

@rachelnabors If it really bothers you then you can do a conditial statement to see if you are in mobile. If not then run skrollr. @Prinzhorn I tried to add #skrollr-body to my main body and this did not work and mobile was still frozen. I had to hack this together and get this to work.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
}
else { 
    skrollr.init({
    beforerender: function(data) {
        return data.curTop > data.lastTop;
    }
});
}