Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

iOS support #9

Closed
karbassi opened this Issue Apr 29, 2012 · 26 comments

Comments

Projects
None yet
9 participants
Contributor

karbassi commented Apr 29, 2012

Doesn't seem to work on iOS devices. I tested on an iPad with no luck.

I forked the repo and will look into this.

Owner

Prinzhorn commented Apr 29, 2012

Thank you! Due to the lack of an iOS device on my side I'm looking forward to hear from you.

Edit:
Some input on this:

This was referenced Apr 29, 2012

Contributor

karbassi commented Apr 29, 2012

@Prinzhorn: I'll do some testing for you on my devices.

Devices I can test:

  • iOS (iPad, iPhone, and iTouch)
  • A few Android devices.

I'll report back.

Owner

Prinzhorn commented May 3, 2012

I don't know what Version of iOS you test on, but this may be caused by iOS prior to 5 not supporting position:fixed.

position:fixed is nothing skrollr's core uses, but something the default skrollr.css uses. Maybe you can test against this WIP example, which does not use fixed positioning http://prinzhorn.github.com/skrollr/examples/normal_page_spice.html

Owner

Prinzhorn commented May 14, 2012

Any news on mobile/tablet/iOS?

Owner

Prinzhorn commented May 31, 2012

I read an article like a weak ago and didn't bookmark it...it was about position:fixed and scrolling on iOS. Here's the point:

By setting ontouchstart to an empty function, the scroll top updates while moving the finger. This would help, but when you release your finger and iOS keeps scrolling and getting slower, the value does not update. So we need a way to get the scroll offset while scrolling on iOS.

Due to the lack of iPhone or the like, I can't hack on this.

Prinz, are you developing on OSX? You could always grab the developer toolkit (as I'm sure you know) and there's a pretty decent iOS simulator on there. I use that to test...would absolutely love to see this work on iPhone! 😏

Owner

Prinzhorn commented Jul 4, 2012

No, I'm using Ubuntu. I don't own any apple devices or software. But I'm aware of the Android emulators and will try to get it work on Android.

As far as I was able to research, getting full iOS support seems impossible. When you lift you finger and while it slowly stops scrolling, JavaScript execution is stopped. To get this working there's probably a shitload of hacking needed to fake this with CSS animations or similar.

skrollr won't reach 1.0 until it works on Smartphones or at least until there was enough research to come to the conclusion that it's not possible.

I found this code on Stack Overflow recently (I forget where) that helps aims to do what you are seeking:

window.addEventListener("scroll", function() {

    // Add the things you need to change on scroll here

});

var ivScroll;
var evt = document.createEvent("Event");

evt.initEvent("scroll", true, true);

var dispatchScroll = function() {
    window.dispatchEvent(evt);
};

var activateOnScroll = function() {
    ivScroll = setInterval(dispatchScroll, 20);
};

var deactivateOnScroll = function() {
    clearInterval(ivScroll);
};

if ("ontouchstart" in window) {
    window.addEventListener("touchstart", activateOnScroll);
    window.addEventListener("touchmove", dispatchScroll);
    window.addEventListener("touchend", deactivateOnScroll);
}

I haven't used it much but in my tests it greatly improves the outcome. Perhaps this can be rolled into the plugin?

Owner

Prinzhorn commented Jul 8, 2012

The thing is, skrollr doesn't use the scroll-event. I don't know if and how this approach could be applied to skrollr.

Edit: Could you do some tests with the current skrollr version and just add those lines before?

window.addEventListener("touchstart", function() {});
window.addEventListener("touchmove", function() {});
window.addEventListener("touchend", function() {});

I read an article which stated that adding an empty handler to those touch events would at least help a bit. But again, skrollr is not using the scroll-event, but uses requestAnimationFrame and gets the scroll offset before each render. But while scrolling iOS doesn't fire requestAnimationFrame nor setTimeout. At least not by default.

I'll add it to my code & let you know how it goes. Fingers crossed...

Added the following for some interesting results:

var y;
$(document).bind('touchmove', function(e) {
    e.preventDefault();
    var t = e.originalEvent.touches[0];
    if (!y) return y = t.pageY;
    var offset = t.pageY - y;
    skroll.setScrollTop($('body').scrollTop() - offset);
    y = t.pageY;
});

$(document).bind('touchend', function(e) {
    y = undefined;
    e.preventDefault();
});

I think it's a step in the right direction.

Owner

Prinzhorn commented Aug 19, 2012

IPhone with iOS 5 and IPad is reported to be working now (I don't have one).

Someone with iOS <5 and IPad please check out this example and see if scrolling is smooth and if the boxes change their color while scrolling and while the scrolling decelerates. http://prinzhorn.github.com/skrollr/examples/anchors.html

Hey so yes that example works but when I try to adding the mobile js file (skrollr.mobile.min.js), and view my page on iOS, it stutters for the first 100 or so pixels then doesn't let me scroll any further. The page I am trying it on works wonderfully on desktop browsers and uses absolute positioning instead of relative.

Owner

Prinzhorn commented Aug 30, 2012

Could you post a link?

Do you use the latest skrollr as well?

Maybe open a new ticket for you particular issue.

Here is the test page I was using http://comeforthesunstayforourwedding.com/iostest.html

And I am using skrollr v0.4.10 on that page

Owner

Prinzhorn commented Aug 30, 2012

See #61. Unfortunately I have no clue and no time right now.

That's fine. Just wanted to let you know.

Owner

Prinzhorn commented Oct 9, 2012

"Should" now work using the latest skrollr which includes iscroll. I'm closing this and ask you to open new issues for specific iOS problems since this thread is a wild mix anyway.

@Prinzhorn Prinzhorn closed this Oct 9, 2012

wsheldon commented Oct 9, 2012

Hey Alex, do we need to include the skrollr.mobile.min.js with the mobile detection function, like in your mobile.html example or does it get included automatically.

Thanks all of your hard work.

Owner

Prinzhorn commented Oct 9, 2012

Yes, like in https://github.com/Prinzhorn/skrollr/blob/master/shim.html

If you would include it without the check, desktop would get the fake scrollbar and touch scrolling as well (using the mouse).

The #skrollr-body element is also important.

Owner

Prinzhorn commented Oct 9, 2012

It seems like it's still not working. #72

upd.
Finally works on iOS.
But not so smooth — only final scroll position counts and animation instantly jumps to it.
How can I live-update animation depending on scroll position?

Owner

Prinzhorn commented Nov 21, 2012

only final scroll position counts and animation instantly jumps to it.

That was before iOS was supported. Please show your code.

Or does the official skrollr demo not work for you either?

Owner

Prinzhorn commented Nov 22, 2012

See https://github.com/Prinzhorn/skrollr/blob/master/shim.html and https://github.com/Prinzhorn/skrollr#mobile-support

The element with the id skrollr-body needs to be the very first element inside the body element.

I am using skrollr, and it does not working on iPad in iOS version 5. The content is not scrolling. Is there any way to fix this issue

Owner

Prinzhorn commented Jan 17, 2014

it does not work

That doesn't help much to fix your problem. Need code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment