[3.0.0-rc.18] Momentum / kinetic scrolling on touch devices fails

[krix]

Hi folks,

I found a possible bug concerning momentum scrolling on touch devices.

I played around on the tutorial page for large datasets: http://ui-grid.info/docs/#/tutorial/190_large_dataset using Chrome 40.0 to emulate a touch device. The site itself has a smooth momentum scrolling, but the grid scrolls without momentum.
The same happens on my Android phone with Firefox and with Safari on an iPad (iOS 8).

Strange enough it happens to work the first time you enable the touch emulation.
If you reload the page with touch enabled or visit the page with a true touch device the problem occurs.
Could this be a timing issue?

[c0bra]

Can you check again on the tutorials site? I believe I may have fixed it.

[krix]

Yes it works like a charm, now!
Thank you so much for the quick fix!

[krix]

Uh I'm sorry, but I think have to reopen this :/
It works in Chrome and on my Android phone with Firefox, but it still fails on an iPad and iPhone.

[c0bra]

Thanks for letting me know! How is it failing?

[krix]

It scrolls, but without any momentum applied. So the behavior is the same as before the fix.
Just tell me, if you need more information or if you want me to test something else.

[c0bra]

@krix OK I found this: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ which talks about adding a -webkit-overflow-scrolling CSS property.

The weird thing for me is that in the Chrome emulator both the divs on that demo scroll with momentum, but on the Grid pages there's no momentum.

Then with testing on SauceLabs the iPad emulator does appear to scroll that div with momentum but NOT the grid with that property added.

Any chance you give try adding -webkit-overflow-scrolling: touch; to your ui-grid-viewport element and see if that changes anything? Debugging with a remote emulator is really tough; there's a 3-5 second delay between all interactions and their results.

[c0bra]

Also maybe check and see if any of the other virtualized grid tools out there have demos that scroll with momentum? Like kendo grid, ember table, etc.

[krix]

@c0bra Thank you for your investigation! I will test this on monday and let you know the results.

[krix]

Good news, adding -webkit-overflow-scrolling: touch; to the ui-grid-viewport element solves the issue! Do you plan to add this to the ui-grid css or is this something I have to take care of for myself?

[c0bra]

@krix great! Thanks so much for testing this. I will add it in today.

[krix]

Hi guys,

I'm sorry to say this, but the issue reappeared in 3.0.0 RC 19.

I'm also pretty sure, that the following commit is causing it:
a1082af

When I remove this part of the touchmove function, momentum scrolling is working again:

// Let the parent container scroll if the grid is already at the top/bottom
if ((scrollEvent.y && scrollEvent.y.percentage !== 0 && scrollEvent.y.percentage !== 1) ||
(scrollEvent.x && scrollEvent.x.percentage !== 0 && scrollEvent.x.percentage !== 1)) {
event.preventDefault();
}


[c0bra]

@krix This should be fixed in unstable. That code segment is different than RC19.