WidthCache causing horizontal overflow (scrolling) #4805
Description
WidthCache, which is placed on the body, messes with overflows and makes a horizontal scrollbar for 50000px. There is no way to make it not overflow and hiding it breaks the spacing entirely.
Details
- Browser and browser version: Firefox 117.0 and Chrome 116.0.5845.179
- OS version: Linux / Windows
- xterm.js version:
"xterm": "5.3.0",
"xterm-addon-fit": "0.8.0",
"xterm-addon-search": "0.13.0",
"xterm-addon-search-bar": "0.2.0",
"xterm-addon-web-links": "0.9.0",
Steps to reproduce
- Add a new console in a react application
- (Not sure if changes anything) Add these options
const theme: ITheme = {
background: '#21212C',
cursor: '#21212C',
black: '#000000',
red: '#E54B4B',
green: '#9ECE58',
yellow: '#FAED70',
blue: '#396FE2',
magenta: '#BB80B3',
cyan: '#2DDAFD',
white: '#d0d0d0',
brightBlack: 'rgba(255, 255, 255, 0.2)',
brightRed: '#FF5370',
brightGreen: '#C3E88D',
brightYellow: '#FFCB6B',
brightBlue: '#82AAFF',
brightMagenta: '#C792EA',
brightCyan: '#89DDFF',
brightWhite: '#ffffff',
selectionBackground: '#FAF089',
};
const terminalProps: ITerminalOptions = {
disableStdin: true,
cursorStyle: 'underline',
allowTransparency: true,
fontSize: 12,
fontFamily: 'Menlo, Monaco, Consolas, monospace',
theme: theme,
allowProposedApi: true,
};
- Observe that you can scroll
50000pxto the right, only when console loads up. Before console loading scrolling behaves normally.