xterm.js
xterm.js copied to clipboard
DOM Renderer: Render background separately
This PR attempts to resolve clipping issues with the DOM renderer when a cell has a background color set and the rendered character is wider than its cell.
It does so by creating separate spans for backgrounds. These background spans are positioned absolute and are added to the row div before any of the text spans (so the text spans will always be drawn above).
Text spans can now be merged even if the background color differs, so in many scenarios we won't even produce more spans than before.
As a little bonus, the text spans are now display: inline
which should provide a little performance boost and might be beneficial when dealing with ligatures.
TODO
- [ ] Do not create background span if there is no background
- [x] Remove selection layer and draw it as part of the background
- [ ] Make sure to handle cursor and decorations properly
- [ ] Adjust tests
- [ ] Analyze how performance differs to old DOM renderer
beneficial when dealing with ligatures.
And BIDI. :smile_cat:
This PR attempts to resolve some rendering issues with the DOM renderer when a cell has a background color set.
Can you elaborate on the issues this will fix?
Perhaps this will fix the issues with rendering double-width chars (#4813)? Linking for reference