Resizing when writing causes text to disappear and spaces to appear

[xReav3r]

If not resizing when writing (now I can resize as I want and text is correct):

If resizing when writing:

Tried fitAddon.fit() and even terminal.resize(fitAddon.proposeDimensions()).
Also tried to debounce to 500 ms with no luck.

Data is written by chunks as Uint8Array from ReadableStream.

Details

• Browser and browser version: Chrome 114.0.5735.133 (Official Build) (64-bit)
• OS version: Linux 5.15.114-2-MANJARO x86_64 GNU/Linux
• xterm.js version: 5.2.1

Steps to reproduce

1. Call write periodically.
2. Call resize.

[Tyriar]

@xReav3r any more details on how you're writing and what you mean by writing periodically? I can't reproduce this but it would be great to fix it.

[xReav3r]

Managed to simulate it here (just resize the window width under line width):
https://codesandbox.io/s/kind-http-xkj3jt?file=/src/App.js&resolutionWidth=802&resolutionHeight=675

[Tyriar]

Do you mean how it goes like this when you make it really narrow?

[xReav3r]

Yes, but it just need to be narrower than line, even if it is one character, but looks like it depends on the text that goes before endline. In real usage I am streaming real terminal trought ReadableStream, where size of chunk is "random".

When resizing over line width everything is okay.

[ithrforu]

I have a similar bug with resizing. Everything is ok without text, but if i paste the text and zoom in to 175% it starts to duplicate and looks weird:

xterm5-3-0-zoom.webm

"xterm": "5.3.0",
"xterm-addon-attach": "0.9.0",
"xterm-addon-fit": "0.8.0"

  useEffect(() => {
    const terminal = new Terminal();
    const attachAddon = new AttachAddon(ws);
    const fitAddon = new FitAddon();

    terminal.loadAddon(attachAddon);
    terminal.loadAddon(fitAddon);

    const sendResize = (cols: number, rows: number) => {
      ws.readyState === WebSocket.OPEN &&
        ws.send(
          new Blob(
            [
              JSON.stringify({
                type: 'resize',
                cols,
                rows,
              }),
            ],
            { type: 'application/json' }
          )
        );
    };
    const doSendResize = () => sendResize(terminal.cols, terminal.rows);
    ws.addEventListener('open', doSendResize);

    terminal.open(notNull(terminalRef.current));
    terminal.onResize((size) => sendResize(size.cols, size.rows));

    const resizeObserver = new ResizeObserver(() => {
      requestAnimationFrame(() => {
        fitAddon.proposeDimensions();
        fitAddon.fit();
      });
    });

    resizeObserver.observe(notNull(terminalRef.current));

    return () => {
      resizeObserver.disconnect();
      ws.removeEventListener('open', doSendResize);
      terminal.dispose();
      ws.close(1000);
    };
  }, []);

[zhukai1991]

I also encountered the same problem. After the browser was scaled, due to the fact that the row height was not an integer when calculating rows, there was an error in the calculation. Finally, when calculating the total height of the container, there was a difference from the actual container height, resulting in some content being occluded

[ithrforu]

Any updates? Still relevant.

[Tyriar]

I think this is just related to reflow no working as expected when writing directly to the terminal instead of via a pty. Closing as designed since AFAIK everything works fine when a shell is running (with some known exceptions across most terminals), if you can't reproduce this in the xterm.js demo it's likely not a problem.

Also if reflow around the cursor is an issue a change was just merged in for this: #5234