Sidebar list doesn't scroll on touch

[nedrichards]

Summary

When using KA Lite on a touchscreen device touch scroll events drop through to the underlying page rather than scrolling long sidebar lists (mouse wheel scrolls work)

System information

Please specify the KA Lite version you were using and your operating system!

• Operating system: Linux
• Version: 0.16.5
• Browser: Chromium 55, Google Chrome 56

How to reproduce

1. Visit a URL such as http://localhost:8008/learn/khan/humanities/medieval-world/latin-western-europe/romanesque1/romanesque-art/
2. Attempt to scroll the arts and humanities list.
3. Notice that the page behind the overlay scrolls.

Real-life consequences (anything community should be aware, for instance how it affects your deployment)

It makes using KA Lite on an interactive whiteboard in a classroom environment somewhat difficult.

[benjaoming]

Thanks for reporting this!

@66eli77 you being the sidebar expert, would you be able to fix or recommend what to do in this case? I don't have a touch device in my development kit, so I find it a bit tedious to reproduce and solve.

[benjaoming]

@nedrichards Did you btw notice the little overlay scrollbar? It's possible to drag it using the mouse, so I was thinking if it's possible to also drag it on a touch device?

[benjaoming]

Also of interest: If I use the mouse's scroll wheel on the contents of a sidebar panel, it scrolls correctly. However, scrolling with the mouse wheel having the cursor placed on top of the overlay scrollbar of a sidebar panel scrolls the full window.

[nedrichards]

I was unable to tap or drag the overlay scrollbar with my finger (or with a handy nearby stylus)

[benjaoming]

Roger - I think this sounds relevant for a patch release.

[66eli77]

I cannot reproduce the issue on android 4.4.2 tablet(chrome browser 50) running kalite 0.16.9, will try 0.16.5

[benjaoming]

@66eli77 - I think the sidebar is something that hasn't been changed much since 0.15?

@nedrichards could you give some more details about which OS your tables etc are running?

[66eli77]

However if I try to scroll list that's not long enough to have a scrollbar, then the browser address bar will be hidden or displayed(this is an android browser specific behavior), thus the page height changes, and if you keep holding your finger on the screen, the render will seem a little strange(see pic below), but once you release your finger, everything will look normal again.

[benjaoming]

@66eli77 that's something slightly easier to live with :)

The issue reported blocks users of certain touch devices to navigate and access contents, which is why IMO it should be fixed. Within limits of course.. if it's a case of a misbehaving browser or likewise, it can also be beyond our reach.

[nedrichards]

I'm using Endless OS (I also work there ;-) but I believe this would be reproducible on any desktop Linux (Ubuntu, Fedora etc.). I'm using a Lenovo Yoga 900 laptop but that's just to reproduce problems we heard from some of our users who were using a digital whiteboard.

Chrome is the regular upstream release and seems to work fine with touch otherwise.

[benjaoming]

@66eli77 maybe try reproducing with a newer Chrome browser?

[nedrichards]

I also tried this on a Surface 3 running Windows 10. Scrolling works as expected in Chrome 56, but does not work in Firefox or Edge. So whilst the scrolling could be more cross browser friendly I'm concerned that there's a Linux specific issue here which I'll investigate further.

[benjaoming]

thanks @nedrichards, much appreciated!

[66eli77]

@nedrichards I opened a PR to fix the issue. Would you be able to checkout the PR #5410 and test it on your devices that have the issue? Thank you very much.

[nedrichards]

Yes! We'll do that and update you.

[rshuler]

Hi, I'm also from Endless. I just tested our build with the patch applied, and it did not help. I also tested the demo.learningequality.org server (though I don't know if that would have been updated yet), and it is still broken as well, testing both in Chromium 55 and Chrome 56 on a Lenovo Yoga 900. The overlay scrollbar does show up when touching the sidebar, but attempts to scroll the sidebar are instead picked up by the browser's scrollbar, regardless of whether I try to touch directly on the overlay scrollbar or anywhere else on the sidebar.

[rshuler]

FWIW, I went into the code and commented out the footer at https://github.com/learningequality/ka-lite/blob/master/kalite/distributed/templates/distributed/base.html#L137, in order to avoid the browser scrollbars, and I still am unable to scroll via touchscreen in the sidebar.

[nedrichards]

Sorry this took so long - we think we've tracked the second failure down to a Chromium bug with touch which was just fixed in Chrome 57, which means the patch you have is good!

[radinamatic]

Awesome @nedrichards, thanks for reporting back! :+1:

Closing this! :smiley:

[benjaoming]

@radinamatic - the issue still has an unmerged PR attached ;)

@nedrichards - is it correctly understood that in order to work for Chrome 57, the patch that @66eli77 wrote is necessary?

[radinamatic]

Ups, had too much sugar this morning and jumped the gun... Apologies! :blush:

[nedrichards]

No, sorry for being unclear. You don't need the patch above to work in Chrome 57. You do need it to work in Firefox and Edge and the patch doesn't break Chrome. So I do think it's worth merging.

[benjaoming]

Thanks for the feedback @nedrichards ! :)

[benjaoming]

@nedrichards would you happen to know which versions of Chrome prior to 57 that had the touch screen scrolling bug?

[nedrichards]

We reproduced on 55 and 56 on Linux.

On Fri, 17 Mar 2017, 17:51 Benjamin Bach, notifications@github.com wrote:

@nedrichards https://github.com/nedrichards would you happen to know which versions of Chrome prior to 57 that had the touch screen scrolling bug?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/learningequality/ka-lite/issues/5407#issuecomment-287425865, or mute the thread https://github.com/notifications/unsubscribe-auth/AASeVZFu40TolVTsInP4UM9QfzE4jZFLks5rmsg2gaJpZM4L_T_Z .

[benjaoming]

Thanks! :)

[benjaoming]

Fixed the remainder in #5422 as a known issue.