New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

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

This comment has been minimized.

Show comment
Hide comment
@klihelp

klihelp 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

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

This comment has been minimized.

Show comment
Hide comment
@abacaj

abacaj Apr 29, 2015

Same here - Chrome 42, OSX 10.10

abacaj commented Apr 29, 2015

Same here - Chrome 42, OSX 10.10

@NeXTs

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Apr 29, 2015

Owner

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

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

This comment has been minimized.

Show comment
Hide comment
@mathieudutour

mathieudutour Apr 30, 2015

Same happening when rows_in_block pushed to 100

Same happening when rows_in_block pushed to 100

@cameron

This comment has been minimized.

Show comment
Hide comment
@cameron

cameron May 2, 2015

Same thing here. Great demo, btw!

cameron commented May 2, 2015

Same thing here. Great demo, btw!

@tomasdev

This comment has been minimized.

Show comment
Hide comment
@tomasdev

tomasdev 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.

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

This comment has been minimized.

Show comment
Hide comment
@kpowick

kpowick 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.

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

This comment has been minimized.

Show comment
Hide comment
@MauricioKruijer

MauricioKruijer May 6, 2015

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 :)

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

This comment has been minimized.

Show comment
Hide comment
@as-com

as-com May 14, 2015

This might be related to #11 on other devices.

as-com commented May 14, 2015

This might be related to #11 on other devices.

@skitiz

This comment has been minimized.

Show comment
Hide comment
@skitiz

skitiz May 27, 2015

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

skitiz commented May 27, 2015

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

@NeXTs

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Aug 5, 2015

Owner

@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.

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

This comment has been minimized.

Show comment
Hide comment
@mathieudutour

mathieudutour Aug 5, 2015

Working in chrome 45, firefox 37 and Safari 9

Working in chrome 45, firefox 37 and Safari 9

@kpowick

This comment has been minimized.

Show comment
Hide comment
@kpowick

kpowick 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.

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

This comment has been minimized.

Show comment
Hide comment
@OscarGodson

OscarGodson Nov 30, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@as-com

as-com 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

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

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Dec 2, 2015

Owner

@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?

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

This comment has been minimized.

Show comment
Hide comment
@vamp

vamp 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

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

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Dec 20, 2016

Owner

@vamp I want keep scrolling native

Owner

NeXTs commented Dec 20, 2016

@vamp I want keep scrolling native

@NeXTs

This comment has been minimized.

Show comment
Hide comment
@NeXTs

NeXTs Dec 20, 2016

Owner

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.

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