Various iScroll issues

[Teh Matt]

Until recently, I've been using YUI scrollView to accomplish my scrolling needs.  However, I have had a few problems with it and finally decided to migrate to iScroll.
I have figured out most of my issues and iScroll almost works.  Almost.

Checkboxes don't work, and scrolling doesn't work correctly.

Right now, the relevant section of my page looks like this:

HTML - Shortened for relevance

<div id="scrollingWrapper">
    <div id="messages">                                                                                   
        <form name="checkBoxes">                                                         
            <div><br>Pull to refresh...<br></div>
            <div id=mailHere>
                <div >&nbsp;</div>
            </div>
        </form>
    </div>
</div>

 

JS - Also shortened for readability

    var scrolly = new iScroll('scrollingWrapper', {
        hScroll:false,
        useTransition: true,
        checkDOMChanges: true,
        onRefresh: function () {
            refreshdiv.innerHTML = '<b>Pull to refresh...<br>';
        },
        onScrollMove: function () {
            if (this.y > 5) {
                refreshdiv.innerHTML = '<br>Release to refresh...<br>';
                this.minScrollY = 0;
            }
            else if (this.y <= 5) {
                 refreshdiv.innerHTML = '<br>Pull to refresh...<br>';
            }
        },
        onScrollEnd: function () {
            if (goodToRefresh) {
                refreshdiv.innerHTML = '<br>Refreshing mail list...<br>';                                
                Do_my_refresh_action();
            }
        }
    });

Onload, I fill #mailHere with a bunch of divs.  Inside each div is some info and a checkbox.  The information displays perfectly, but the checkboxes do not work on iOS (they do work on FF however...).  Also, I am unable to scroll the content, it simply bounces back whenever I try to move.
I know iScroll only works on the first element within the wrapper, so I tried removing the pullToRefresh div.  It also didn't work.

Right now I can't figure out what else to try.  Nothing I'm doing will get either the checkboxes or scrolling to work properly.

Does anyone have any ideas?

Thank you for your time.

- Matt

[Jeffrey Hastings]

I am having the issue with it bouncing back when trying to scroll. Hopefully someone has some suggestions. I will update if I find anything useful out.

[Kerri Shotts]

For your issues with checkboxes, try the suggestion here: https://groups.google.com/forum/#!msg/iscroll/SJhHHywASEI/egczXHyOwAgJ (Add other html tags as necessary, like textarea, if you intend on using them.) Works for me, anyway.

[Teh Matt]

 Kerri - Thanks for the reply on the checkboxes.  I'll check it once I get back to my computer.  Hopefully it works; seems like a bad hack, but hey, I'd say iScroll itself is a bad (but necessary!) hack ;).

I still haven't come up with anything for the bounce-back issue.  Anyone have a fix?

- Matt

[trkaplan (tuncay)]

@Teh,
Can we see your work online? Maybe a css style (fixed height etc)
causes that bouncing?

[Teh Matt]

Unfortunately not, sorry.
It is dependent on data from a server that is not open to the internet and cannot be migrated.  So I can try to put together the relevant css/js/html for you, but it won't work without the data.
Give me a day or two and I'll try to get you the css/js if you think it'll help.

Would fixed heights be bad?  I think I have the iscroll wrapper in a fixed height, but I assume that is the way it should be done.

- Matt

[Kerri Shotts]

Try turning off the checkDOMChanges and call a refresh() on the scrollbar yourself. Say, near the end of your load routine do a setTimeout(function() { scrolly.refresh(); }, 250); See if that helps. Quite possible that iScroll isn't picking up your DOM changes.

What's some of your CSS look like for these portions? If the height of the containers inside is equaling out to 100% of the viewport (and not the content), it would also explain the bounceback.

[Teh Matt]

I eventually fixed most of the problems.  I now have it scrolling.  Not completely sure what did it; I ended up simply rewriting the html and css for most of the page.

 I've noticed that it is extremely laggy.  On an iPhone 4, it takes quite a while to respond to my touch, and the scrolling is not at all smooth.  I think this slowness is related to the amount of items I have inside the scroller, but that seems rather unreasonable.  I have an default of 30 main items, each comprised of 5 divs (the minimum I can make it), so that is only 150 elements to be managed.  I could see the slowdown when the user loads more data - even the desktop browser slows a little when dealing with a few thousand divs- but 150 doesn't seem like that much.  Scrollview was certainly able to handle 400 or so without a problem.

Does anyone have any idea on how I could make this faster?  I don't need it to be quite native speed, but a delay of several seconds when trying to scroll is unacceptable (darn users and their darn complaints about useability...).  I'm currently debating going through the source and ripping out anything I'm not using (zoom, hScroll, etc), but if there is something simple I can do to make it faster, suggestions would be very welcome.

Thanks once more,

- Matt

[Kerri Shotts]

Things to try:

 - eliminate as many positioned elements inside the scroller as possible ('relative' positioned elements especially)

 - Nuke the vertical/horizontal scroll bars. They take up resources.

 - Add -webkit-transform: translate3d(0,0,0) to the surrounding container. (Shouldn't make a difference, but worth a go.)

 - Switch to iScroll-lite. Loads faster, with less features.

Hope that helps?

[Teh Matt]

Thanks.
I'll try to get rid of the position:relative elements that I may have left.  Don't think there are any, but it can't hurt to take a look.
Scrollbars are gone already.
I'll try the translate just in case.
I was debating switching to iscroll-lite, but I do like the pull to refresh feature.

- Matt

[Kerri Shotts]

Ah yes, well, I wasn't using pull-to-refresh or zooming, so I could justify the change. Given that the lite version doesn't do nearly as much and assumes functionality only on mobile browsers, it is less resource intensive. Turning off the scrollbars helps too, since of course, they have to be animated as well. That alone might make a big enough difference.

I do know that iScroll applies the translate when it scrolls, so it may not make a difference to apply it manually, but perhaps adding it outside of the scroller (i.e., the container that contains the scroller) might help. Uses more memory, but worth a try.

The number tags and the the number of positioned elements directly impact the performance. For example, the app I'm working on had a ridiculous amount of <SPANs> being generated, most of which were relatively positioned (just slightly). Eliminating a 3rd of those tags increased responsiveness massively, and in the end, I got rid of the relatively positioned tags all-together. And then I worked to factor out the need for all of those SPANs (I had the need to detect a specific word that was tapped on), so that the number of tags was drastically reduced. Scrolling was much better. But still not fast enough for my tastes -- which lead me to goto iScroll-lite. Voila, near-native speed.

The other option I was pursuing (and may still pursue) was the CANVAS tag. I doubt that's the direction you want to go, but for me it would have allowed me to avoid the scroll entirely, and it was uber-fast to write to. Only problem was that the text was blurry, so I had to downscale it by about 75%... which made my head hurt. ;-)

[Teh Matt]

Spans and divs are bad, but would a table be any better? I need to organize my elements into a certain arrangement, so I can't get rid of the tags altogether.  I'm guessing a table wouldn't be any better, but haven't tested it yet. 
I also just ran into another problem: the bottom 50px or so of the content in my scrolling element is cut off.  I've looked through the CSS and can't find anything, and think that perhaps the bottom pull-to-refresh button (that I don't have) is trying to take a piece of my content, thinking it is a pull-to-refresh.  If so, is there any way to disable this?
I'd love to use <canvas>, but I need to support BlackBerry 5+, Android 2.0+, WP7.5+, and iOS 4+, and I have my doubts that it would work well on all of them (specifically BB and WP).

Why couldn't Google and Apple have just implemented position:fixed a few years earlier?

- Matt

[Edit: I just switched to iScroll-lite and it appears to work a little bit faster.  The scrolling feels fine now, but I'm still having momentary ~3sec pauses where it locks up.  I didn't notice any difference with pull-to-refresh actually; I added one line and it seems to work the same as it used to.  Still that 50px hidden bit though =/.]

[Teh Matt]

Wow, I think I'm finally done (with a few problems).  I should probably list some of the issues I've had on the bug tracker when I get a chance.

1) Depending on how slow the CPU is (<= iPhone 4), my page gets shifted left a wee bit.  This leaves a white offset on the right side of the page.  Calling refresh() appears to fix this.
2)  Locking up! Every now and then (2-10sec), iScroll [normal|-lite] decide to freeze.  The page is absolutely unresponsive for roughly 5 seconds.  Browser functions work, iScroll doesn't.  This also only happens on the slower iPhone 4, not on desktop browsers or the iPad I test with.  I haven't had access to a rooted droid, so I haven't done any testing there.  However, I'll be testing on a bunch of devices in the near future, so I'll bring back the results.  I suspect this issue is something to do with how Mobile Safari implements translation, but am not positive.

Other than that, my page works.  I'll be trying to work out all the issues over the next few weeks and will post back if I find any resolutions.  I'm sure I'm using this feature a bit more than most general use-cases, so hopefully what I'm doing can help to make iScroll even more robust in the future!

- Matt