edited February 2012 in Enyo 1.0
I get the feeling everyone is ignoring this obvious problem. Scrolling of VirtualLists is not butter-smooth. On iOS and Android. As the Apps begin to pour in, devs are gonna get slammed for this. Anyone have any hacks for this? Or am i the only one using a VirtualList?


  • It seems like turning off acceleration in the scroller code helps some. However, scrolling is a tough operation for WebKit -- we worked a lot on webOS 3.0 to hardware accelerate it on our WebKit using 3D transforms.
  • hmmm, turn off acceleration how?
  • Have you been ignoring the forums, and not followed the Enyo forums? This problem has most certainly not been ignored. It's next to impossible to get it to scroll butter-smooth without scrapping the scrolling code and replacing it with something more responsive. Beyond that, I've tried to get as much performance from it as I can and shared my findings numerous times on the forums. You are most certainly not the only one using VirtualList, and it's arrogant to think you're the only one who's noticed this. I almost half-think you're joking.

    Also, if scrolling is such a tough operation for webkit, then why did Mojo lists scroll so well on a Pre 2, where Enyo lists stutter for every item? Did you guys really have to use 3D transforms instead of the old Mojo method? Oh well, at least now that you're aiming for cross-browser compatibility, you'll have to scrap that method for something that performs better and is compatible with other browsers, right?
  • yes, I was half-joking :)
    I was just shocked that apps are been published to ios/android, and this problem still exists. Just wondering how devs were getting away with it, cos users are harsh.
    And no, I haven't seen anything (helpful) in the forums
  • I must admit I haven't tried on real devices yet (only on iPad's browser), but my lists have a decent scrolling. Not state of the art, but definitely not as bad as being an issue.
  • @rafa_bernad you might wanna try on a real device, just to make sure you're fine with it
  • edited February 2012
    What's difference between scrolling in Mojo and Enyo?

    Mojo scrolling was generally for a 320x480 screen. Enyo is often scrolling content that's three or four times as large, but with a processor that's maybe twice as powerful as what was on the original Pre. Mojo scrolls by setting a div as "overflow: hidden" and setting the scrollTop/scrollLeft properties of the element. This means changing the DOM rather than just updating styles. The Mojo code also used a special webOS-only attribute for overflow, "-webkit-palm-overflow" that acted like hidden but bypassed some of the recalculation code to make scrolling faster for fixed size regions.

    Enyo doesn't use the -webkit-palm-overflow attribute; it always tries to keep the scrollTop/scrollLeft attributes at 0 for the DOM node it's scrolling. If the Enyo scroller has accelerated set to true, it uses 3D CSS transforms to adjust the styles of the node, otherwise, it just uses CSS positioning. In theory, this should be faster as you're not changing the actual DOM, just the styles applied to the element, which means nothing needs to be re-rendered at the HTML element level.
  • @IngloriousApps Will do, no doubt. Performance is much worse as a Phonegap app than as a webpage?
  • I'd actually be really curious to see someone update enyo.BasicScroller to use the DOM attributes and overflow:hidden instead of the CSS style changes and see how that performs on Android/iOS.
  • @unwiredben Is that a Hackathon Challenge? :)
  • I would donate to someone if they got scrolling going at a decent clip on the other systems prior to my being able to port to 2.0. I'm much more of a logic guy than a math guy, and I don't know enough about most of the concepts involved to be able to do anything other than fumble my way through trying various workarounds.
  • I'm willing to donate $500 cash to anyone that pulls it off!
  • *Crosses finger* :-D
  • It might be worth looking at iScroll-4 Lite (a cross-platform touch scrolling library) to see what optimizations they've made.

    Also, I'm curious how "-webkit-overflow-scrolling: touch" on iOS5 performs since it doesn't rely on Javascript event handling to scroll (which could stutter due to GC or other event handling delays).
  • edited February 2012
    I'm willing to donate $500 cash to anyone that pulls it off!
    So I made great progress on the scrolling issue in enyo 1.0. It is working great in Android, probably iOS too.

    Add GloveBox.js to your project and depends.js file.

    Then add the snappy GloveBoxScroller kind:
    	name: "GloveBoxScroller",
    	kind: "Control",
    	create: function() {
    	rendered: function() {
    		var gloveBox = new GloveBox(;	
    Replace any Scoller kind with GloveBoxScroller and enjoy fast smooth scrolling!

    This is just a start. There's lot to do but it will get us going.

    Bug: Keeping the scrolling within the parent element!

    ... and then send my $500 @IngloriousApps! :-)
  • It's not at 100%. I have some issues with it and things like backgrounds images/colors not extending all the way down, scrolling over headers, and general issues. I also had to explicitly call .rendered on each usage as it was not calling automatically. Needs some work.
  • hmm. Good work so far :) But, on TouchPad webOS, it's probably only somewhat less jerky than the current Enyo implementation is on Android. Also, having problems with it scrolling elements that aren't actually inside the scrollers, scrolling over the top of elements that aren't actually inside the scrollers, my SlidingView nearly always registering a horizontal drag on it when i'm scrolling .. and one scroller that refuses to return to it's original location, instead snapping suddenly into a spot slightly lower than it should be. Definitely not a production grade replacement for my particular usage scenarios at the moment, but I'm certainly encouraged by it.

    Also, I don't think I understand even the slightest bit of it. :|
  • Yeah, I'm with you @ekdikeo, I have no freaking clue. I just want someone smart enough to solve this and gimme something to plug into my App. My $500 offer is still on the table :)
  • I might plug it into one particularly troublesome scroller on Android where it seems to be fairly acceptable, and the only problem is that the header above it scrolls with it. However, I've been poking at it for a little while and haven't made any kind of a dent into the other problems, probably mostly due to a complete lack of understanding of what it's doing.
  • iscroll-4 scrolls fine on Android 4.0 and webOS 3.0.5 (and is supposed to work on iOS). It does not work on webOS 2.2.4.

    So, if this could be used together with VirtualList or Scroller in general...
  • Can anyone from the Enyo team please clarify if this is being worked on for the next Enyo release? It seems redundant to spend much time on this if an official fix is only one or two weeks away.
  • I noticed today on the other app that I just ported over to Android, that FadeScroller seems to run noticeably faster than plain Scroller, at least on CM9 on TouchPad. Still has the problem with flick-scrolls though. And it makes my app even uglier :D
  • Also, the question is, will there be "enough" widgets in the first widget release?
  • You can follow our scroller work in the GitHub repo -- just look at the commits in
  • After finally testing Enyo 1.0 on a real Android 2.3 phone, I just realized, how bad scrolling really is there. Even a normal VBox in a Scroller (no fancy VirtualList) is almost unusable. On Android 3.2 and 4.0 however, this is OK.
  • edited February 2012
    After seeing scrolling on an iPhone 4, I'm gonna up @IngloriousApps ante by another $250 for the person who whips up a complete solution. That brings the pot to $750.

    I have my app on 7 platforms, so I'll be happy to test as needed.
  • i'm afraid i don't understand a lot of this thread... all i know is that on my Touchpad 3.0.5 with faster card animation, increase touch sens... the scrolling/zooming is appalling - a facebook page (with the stock browser) will stutter, stall, i'll get the blue banner appearing twice on the screen - then when you gesture, zoom and move, vast swathes of checkerboard "nothing" for seconds on end, before the device eventually catches up...

    i'm sure all you lot are doing a great job with webOS, but this is just horrible :-(
  • @Panavision_ Man, you are so off topic... I dont even get your point.
  • edited February 2012
    I think he's referring to the scrolling in the webOS browser, whereas we're referring to scrolling in Enyo as a whole.

    Panavision_: On webOS, the scrolling in Enyo is smooth as silk, when compared to other systems. It's not actually that smooth in webOS, but for the most part, it's usually quite acceptable. On Android, or I imagine in iOS 4, it's pretty much broken, though. Though I'd advise using the Facebook app due to the extreme complexity in the Facebook page, the app weeds a lot of that junk out so it's way faster. If you wait for the entire page to load before manipulating it, though, it seems to be pretty reasonable.

    I did some playing with iScroll last night, even though I've heard from several people that there are some fundamentally broken things about it when used outside of iOS .. I was able to get it to work quite well in one specific situation, however it is most definitely not built to work in an environment with the UI complexities of Enyo -- it pretty much automatically fails on sliders, and other components.

    I didn't bother testing it on a device on the one space I had it working on, as if I couldn't get it working on the main area of a program, it's not very useful, but I'll try to keep plugging at it when I can.

    Mostly, I can't seem to get it configured to properly surround the area, it seems, that usually what I get is nothing but "mouseout" events from it, which is a little .. confusing.

  • yea, sorry makle,and thanks for the detailed response ekd - i'm way OT - sorry forthe chaff - I'll get me coat and go...
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!