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

Sidebar list doesn't scroll on touch #5407

Closed
nedrichards opened this Issue Feb 13, 2017 · 27 comments

Comments

Projects
None yet
5 participants
@nedrichards

nedrichards commented Feb 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 13, 2017

Member

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.

Member

benjaoming commented Feb 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 13, 2017

Member

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

screenshot from 2017-02-13 19-31-49

Member

benjaoming commented Feb 13, 2017

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

screenshot from 2017-02-13 19-31-49

@benjaoming

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 13, 2017

Member

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.

Member

benjaoming commented Feb 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@nedrichards

nedrichards Feb 13, 2017

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

nedrichards commented Feb 13, 2017

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

@benjaoming

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 13, 2017

Member

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

Member

benjaoming commented Feb 13, 2017

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

@66eli77

This comment has been minimized.

Show comment
Hide comment
@66eli77

66eli77 Feb 13, 2017

Contributor

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

Contributor

66eli77 commented Feb 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 13, 2017

Member

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

Member

benjaoming commented Feb 13, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@66eli77

66eli77 Feb 13, 2017

Contributor

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.

screenshot_2017-02-13-15-23-35

Contributor

66eli77 commented Feb 13, 2017

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.

screenshot_2017-02-13-15-23-35

@benjaoming

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 14, 2017

Member

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

Member

benjaoming commented Feb 14, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@nedrichards

nedrichards Feb 14, 2017

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.

nedrichards commented Feb 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 14, 2017

Member

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

Member

benjaoming commented Feb 14, 2017

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

@nedrichards

This comment has been minimized.

Show comment
Hide comment
@nedrichards

nedrichards Feb 14, 2017

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.

nedrichards commented Feb 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Feb 14, 2017

Member

thanks @nedrichards, much appreciated!

Member

benjaoming commented Feb 14, 2017

thanks @nedrichards, much appreciated!

@66eli77

This comment has been minimized.

Show comment
Hide comment
@66eli77

66eli77 Feb 14, 2017

Contributor

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

Contributor

66eli77 commented Feb 14, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@nedrichards

nedrichards Feb 16, 2017

Yes! We'll do that and update you.

nedrichards commented Feb 16, 2017

Yes! We'll do that and update you.

@rshuler

This comment has been minimized.

Show comment
Hide comment
@rshuler

rshuler Mar 7, 2017

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 commented Mar 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@rshuler

rshuler Mar 7, 2017

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.

rshuler commented Mar 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@nedrichards

nedrichards Mar 15, 2017

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!

nedrichards commented Mar 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@radinamatic

radinamatic Mar 15, 2017

Contributor

Awesome @nedrichards, thanks for reporting back! 👍

Closing this! 😃

Contributor

radinamatic commented Mar 15, 2017

Awesome @nedrichards, thanks for reporting back! 👍

Closing this! 😃

@benjaoming

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Mar 15, 2017

Member

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

Member

benjaoming commented Mar 15, 2017

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

@benjaoming benjaoming reopened this Mar 15, 2017

@radinamatic

This comment has been minimized.

Show comment
Hide comment
@radinamatic

radinamatic Mar 15, 2017

Contributor

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

Contributor

radinamatic commented Mar 15, 2017

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

@nedrichards

This comment has been minimized.

Show comment
Hide comment
@nedrichards

nedrichards Mar 17, 2017

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.

nedrichards commented Mar 17, 2017

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

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Mar 17, 2017

Member

Thanks for the feedback @nedrichards ! :)

Member

benjaoming commented Mar 17, 2017

Thanks for the feedback @nedrichards ! :)

@benjaoming

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Mar 17, 2017

Member

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

Member

benjaoming commented Mar 17, 2017

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

@nedrichards

This comment has been minimized.

Show comment
Hide comment
@nedrichards

nedrichards Mar 17, 2017

nedrichards commented Mar 17, 2017

@benjaoming

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Mar 18, 2017

Member

Thanks! :)

Member

benjaoming commented Mar 18, 2017

Thanks! :)

@benjaoming

This comment has been minimized.

Show comment
Hide comment
@benjaoming

benjaoming Mar 18, 2017

Member

Fixed the remainder in #5422 as a known issue.

Member

benjaoming commented Mar 18, 2017

Fixed the remainder in #5422 as a known issue.

@benjaoming benjaoming closed this Mar 18, 2017

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