jquery.terminal icon indicating copy to clipboard operation
jquery.terminal copied to clipboard

Stuck scrollbar on webkit, maybe an issue due to 2k resolution

Open hacklover opened this issue 5 years ago • 13 comments

Issue summary

Scrollbar get stuck when I scroll down after have scrolled to top

Expected behavior

Scrolling should work correctly using the mouse scroll

Actual behavior

Scrollbar get stuck using the mouse scroll

Steps to reproduce

  1. Send some commands in any jQuery terminal instance
  2. Scroll to top using the mouse
  3. Scroll to down using the mouse
  4. Scrollbar get stuck (it scrolls a little but then rip)

(I can still scroll dragging the scroll thumb)

Browser and OS

Chrome 85 and Brave with Chromium 84 on Linux @ 2560x1440 On Firefox it works correctly

hacklover avatar Sep 03 '20 02:09 hacklover

It work for me on linux. Do you use mousewheel plugin, I've stopped using it long ago, but it should not change anything it just don't needed?

Can you provide demo where this is visible, maybe full screen example that is included with the library or do it need something extra.

jcubic avatar Sep 03 '20 07:09 jcubic

I was checking your website with full screen console and it works fine, but I only have FullHD screen. The resolution should not matter.

jcubic avatar Sep 03 '20 07:09 jcubic

Hey jcubic, thank you for the reply.

I can reproduce this issue on every instance, also on terminal.jcubic.pl I'm not using the mousewheel plugin, anyway I just tried @ 1920x1080 and the problem persists... dunno.

I'll post here if I find more about this issue

hacklover avatar Sep 09 '20 11:09 hacklover

Maybe you have an error in JavaScript console, maybe other part of the code stopped JS to execute or maybe there is other code that use mousewheel and that interfere. Does the app use just the terminal full screen or in window with other code?

jcubic avatar Sep 09 '20 11:09 jcubic

I specify that the problem happens only when the scrollbar is visible and I reached the top of the terminal. I can reproduce it also on https://terminal.jcubic.pl/#demo

Sometimes an error appears in the demo but it doesn't seem to be related to the scroll problem https://www.youtube.com/watch?v=xAmwYHepXso

hacklover avatar Sep 11 '20 13:09 hacklover

You some how make terminal throw internal error, did you modified $.terminal.defaults.formatters. Do you do something in console. can you copy paste what did you typed to the terminal?

jcubic avatar Sep 11 '20 15:09 jcubic

Ok I got the exception, will investigate, when I fix the error we need test again the scroll issue.

jcubic avatar Sep 11 '20 15:09 jcubic

Can you test again on the terminal website have few bugs, I accidentaly deployed src version and didn't update the demo code after 2.18.0. It was small change in the API but it make my demo broke.

jcubic avatar Sep 11 '20 16:09 jcubic

Yes, the problem persists. The throwed error that you see in the video isn't related at all, because the scroll issue that starts from 0:15 happens also on my website and elsewhere.

(video is uncut and the error has been recorded because it occurred after a focus out, I didn't say it before because it was hard to explain XD)

hacklover avatar Sep 12 '20 10:09 hacklover

Sorry I cannot reproduce it, can you tell me exact steps, maybe you do some kind any clicks or keystrokes. The only issue I see is that the page scroll down when there are no scrollbar when I press enter.

jcubic avatar Sep 12 '20 11:09 jcubic

I have to try on some other devices.

The only thing that is changed here over time is my monitor. I thought it was responsible for this bug, but I can't confirm it.

Anyway, to reproduce this bug on my computer:

  • I send random commands to make the scrollbar appears
  • I send other commands just for spacing a bit more
  • I scroll to the top
  • Now I'm stuck at the top like in the video @ 0:15
  • I can back to the terminal input by pressing "enter"

hacklover avatar Sep 16 '20 14:09 hacklover

Do you have anything in the console after that exception go away? You can try to debug it in the browser. Try adding break point in this line:

                function mousewheel(event, delta) {
                    if (!shift) {

The only idea I have is that shift is true and don't change, this is something I was not able to make to work, but the code is there. I wanted the shift to disable the mousewheel so you can scroll whole page instead of the terminal.

jcubic avatar Sep 16 '20 15:09 jcubic

Console is ok, anyway no problem it's just a minor issue. It fixes itself by pressing enter, dragging the scrollbar or (on some instances) clicking on the terminal.

I tried keeping the shift key pressed and mousewheel stops, but then the problem persists. I'll investigate more (also on Windows and with other pc).

hacklover avatar Sep 18 '20 13:09 hacklover