Scrolling on OS X 10.x stops scrolling inside scroll area when viewing next chunk #3

Open
mikelittman opened this Issue Apr 28, 2015 · 19 comments

Projects

None yet
@mikelittman

It appears that the scroll handoff between clusters inside a large list causes some problems with OS X smooth scrolling. See video: http://d.pr/v/1fQ67

@klihelp
klihelp commented Apr 29, 2015

Same happening for me too, tested on OSX Chrome.
I scrolled with touchpad to the bottom of the container quite fast; it's works if you scroll slower

@abacaj
abacaj commented Apr 29, 2015

Same here - Chrome 42, OSX 10.10

@NeXTs
Owner
NeXTs commented Apr 29, 2015

Thanks for the feedback. I'm working on it.
I believe this happens when new cluster inserts to DOM, so as temporary workaround you could increase rows_in_block. In demo page it's specified about 25 everywhere, so you could try to set it 100. In total your table would contain 400 DOM elements, which anyway is better than 10000.

You could change that option in playground http://nexts.github.io/Clusterize.js/#playground

@mathieudutour

Same happening when rows_in_block pushed to 100

@cameron
cameron commented May 2, 2015

Same thing here. Great demo, btw!

@tomasdev
tomasdev commented May 4, 2015

Yeah, depending on rows_in_block it will allow you to keep finger/wheel scrolling a bit more or less. I think the best fix for it (meaning not to have this bug even when doing a crazy-fast-as-flash scroll), is to use a library like iscroll or similar to overwrite the native scrolling.

@kpowick
kpowick commented May 4, 2015

I'm seeing the same on OSX with inertial scrolling of the trackpad. However, using the scrollbar itself and dragging it up/down does not cause the problem - Even when dragging the scrollbar much faster than inertial scrolling of the trackpad. I suppose this is due to mouse pointer being "anchored" to the scrollbar control by its "mouse button down" event.

@MauricioKruijer

I do experience the same thing. It's a lot less when you set the rows_in_block to 200 but then it's starting to lag...
The demo is awesome :)

@as-com
as-com commented May 14, 2015

This might be related to #11 on other devices.

@skitiz
skitiz commented May 27, 2015

I concur. While scrolling through lists, it jumps to the page scroll instead.

@NeXTs NeXTs pushed a commit that closed this issue Aug 5, 2015
Denis Lukov Fixes #3 Chrome scrolling issue on OS X 10.x c4ab015
@NeXTs NeXTs closed this in c4ab015 Aug 5, 2015
@NeXTs NeXTs reopened this Aug 5, 2015
@NeXTs
Owner
NeXTs commented Aug 5, 2015

@mikelittman @klihelp @abacaj @mathieudutour @cameron @tomasdev @kpowick @skitiz

Hello guys, please check if last commit (v0.10.0) helps.
Solution is a little bit crazy but it works in Chrome, as for me.
I'm still experiencing this issue with Safari on Mac, because Safari doesn't apply style that added before scrolling. It apply style when scroll completes. I've tried various tricks to force Safari to redraw/repaint style, but without luck. Need some time for investigation.

Btw, someone please check other browsers on Mac.

@mathieudutour

Working in chrome 45, firefox 37 and Safari 9

@kpowick
kpowick commented Aug 10, 2015

Latest Chrome on OS X 10.10.4 is much better, though using the scrollbar still results in a smoother experience than inertial scrolling of the trackpad. Safari (8.0.7) still exhibits some "jerkiness" or temporary freezing of the scrolling list when using the trackpad. Using the scrollbar is ok.

@NeXTs NeXTs added the bug label Aug 10, 2015
@NeXTs NeXTs self-assigned this Aug 10, 2015
@OscarGodson

Yeah, in Safari scrolling locks up in Safari 9 for me too still. Has there been any progress on this or maybe a commit in a branch we can test?

Happens in the demos and in my own implementation I'm resizing other elements on the page based on the td widths whenever the clusters update and when it locks up it it makes the other elements to resize incorrectly by a lot.

@as-com
as-com commented Nov 30, 2015

There's also a strange issue about scrolling by dragging the scrollbar around in Safari 9.0.1: https://cloudup.com/cFkhiYqEuKT

@NeXTs
Owner
NeXTs commented Dec 2, 2015

@OscarGodson Unfortunately I have no my own Mac yet so I can not dive into it completely.
@as-com Could you please provide some simplified codepen/jsfiddle example?

@vamp
vamp commented Dec 10, 2015

@as-com, @OscarGodson, @NeXTs, yep, just becase clusterize (scrollEv) needs to be added to wheel/scroll events (for scrollElement & document) and looks like it solves this issue.

small (paste before clusterize initialization):

var scrollHandler;
var scrollElement = ....;

                    if (scrollElement) {
                        var on = !!scrollElement.attachEvent, name = (on) ? 'attachEvent' : 'addEventListener', fn = document[name];
                        scrollElement[name] = function (eventName, handler) {
                            if (/scroll/i.test(eventName)) {
                                scrollHandler = handler;
                            }
                            return fn.apply(this, arguments);
                        };
                    }


/// clusterize initialization goes here


                    if (scrollHandler) {
                        delete (scrollElement[name]);
                        fn.call(scrollElement, (on ? 'on' : '') + 'wheel', scrollHandler, false);
                        fn.call(document, (on ? 'on' : '') +'scroll', scrollHandler, false);
                    }

also you need to care about destroy callback and installed handlers

@NeXTs
Owner
NeXTs commented Dec 20, 2016

@vamp I want keep scrolling native

@NeXTs
Owner
NeXTs commented Dec 20, 2016

Finally I got Mac with OS X v10.11.6
Can't reproduce this problem anymore. Works as expected in Chrome 55.0.2883.95, Safari 10.0.2, Firefox 50.1.0

Does someone still experience this problem?
If not I'll close this issue in one month.

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