Shaky sticky headings when scrolling

[dylanjmcdonald]

Hey Peter,

Great plugin, it works like a charm even with iscrollview, which is what I'm using for my jQuery Mobile site.

The one minor issue I'm running into is shaky sticky headings while scrolling. After a bit of research it appears it may be a webkit performance issue and some of the suggested solutions on StackOverflow don't seem to be doing the trick.

Any idea as to how to resolve this issue, if any?

[peterudo]

Hey there! Glad you like it :-)

What browser are you experiencing this with, and how did you configure iscroll? Is there anywhere I can see this?

[dylanjmcdonald]

Unfortunately I'm working on the mobile site locally until I get it polished up. I'm experiencing the issue in Chrome v21.0.1180.83 and Safari on iOS 5.1. I'm setting the sticky headers during the pageinit event of jQM.

setStickyHeaders: function (event) {
    var page = $(event.target);
    page.find(".iscroll-wrapper").jqmData('iscrollview').iscroll.enableStickyHeaders('li.ui-li-divider');
    page.find(".iscroll-wrapper").iscrollview("refresh");
}

[peterudo]

I'm not quite sure what kind of shaking we're discussing here. I know that the header sometimes can "miss" 1 pixel when scrolling fast on the non-transitioned version. Is that it?

Have you checked the examples at http://rudolfrck.github.com/iscroll-stickyheaders/ ? Do you experience the same kind of shaking there?

[dylanjmcdonald]

Spot on. It is the shaking that misses a pixel when scrolling fast. Good to know it's not just me! I'll give the transitioned version a try. I'll keep my eye out for any fixes for the non-transitioned version.

[peterudo]

I haven't looked into this in a while now, since nobody commented on it until now, but if I remember correctly I think it might be a retina issue. The header moves 2 physical pixels on screen for each pixel, thus creating a small gap. At least I haven't been able to reproduce it on a non-retina screen.

Maybe it could be an idea to offset the header -1 pixel on retina screens so it's not as noticeable. I'll have to test and see to be sure though.

[dylanjmcdonald]

Great, thanks Peter!

[peterudo]

It happens on non-retina screens as well. It's just not as noticeable. It also only happens after you release your finger/mouse. I'll take a quick look to get an overview of the work required.

[peterudo]

It should be fixed now! Could you test with the latest version?

[dylanjmcdonald]

Fixed. You're the man! Again, great plugin. Thanks!

[peterudo]

Great! Thanks for taking the time to make it better and not just abandon it :-) Let me know if you have other issues or feature requests.