xterm.js
xterm.js copied to clipboard
clear command clears scrollback but doesn't update the DOM element height
When you clear the screen and scrollback using the "clear" command in a shell, this results in the content itself being cleared correctly but the DOM element that is sized to provide a scrollbar in the browser (and presumably is used to track the scroll position) isn't truncated now that the content is in fact removed from the scrollback. This results in a kind-of ghost scrollbar that indicates that there is content in the scrollback when there isn't any. You can scroll up and down and the scrollbar shows that you're scrolling, but since there isn't any content no actual scrolling happens in the terminal output.
Details
- Browser and browser version: all browsers tested (Safari, Firefox, Chrome)
- OS version: macOS 10.15.2
- xterm.js version: 4.3.0
Steps to reproduce
- Connnect to a server
- Fill the screen with some output so that it also pushes lines to the scrollback
- Test that you can scroll to reach the scrollback
- Type "clear" (and enter) in the shell
- Observe that the scrollback and screen has been cleared
- The bug is that now if you scroll you can see that the scrollbar indicates that there is content in the scrollback even though it is in fact cleared and there is nothing to scroll to.
I'm not sure if I've ever seen such a behaviour. Can you clarify the connect to a server step please? Are you connecting to a Linux server via SSH? The reason I'm asking: MacOS, Linux and Windows use different techniques to clear the screen after you type clear. It would be good to know what OS and version this server runs on, so we can reproduce more easily.
By "connect to server" I mean that you'll need to use xterm.js together with something (such as an ssh client, node-pty, etc.) to allow you to test this particular issue.
Note that the "clear" shell command doesn't emit the VT-commands to clear the backscroll in all systems. On some systems, such as macOS, it just clears the screen but not backscroll. On Linux (tested with CentOS) the "clear" command results in the following with debug logging:
xterm.js: parsing data – "\u001b[3;J\u001b[H\u001b[2J"
That means that you should be able to test this also on macOS by making a script / app that emits the same sequence, e.g.:
console.log('\u001b[3;J\u001b[H\u001b[2J');
I tested this on macOS in a VS Code terminal and it reproduces the problem.
When this happens what you should now observe is that the scrollback and screen have been correctly clearned but that the div with class name "xterm-scroll-area" height has not been adjusted to account for the cleared history.
Strangely enough, it seems like the bug is only triggered with that precise sequence of VT commands. If you omit the \u001b[H -command (move cursor to home) then the bug doesn't happen.
Thanks for the info. I have been able to reproduce by connecting to a Debian 10 server via SSH from within VSCode. Interestingly, the scrollbar disappears after resizing the terminal window.

Great, thanks! Sorry for the confusing report.
I haven't tested, but I suspect this is fixed. Please let me know if not