Fix #294007 terminal gap#306133
Open
dripfyyy wants to merge 10 commits intomicrosoft:mainfrom
Open
Conversation
…om levels Fixes a rendering inconsistency in the integrated terminal on macOS high-DPI displays where a visible gap could appear between the selection highlight and adjacent UI elements (tabs/divider). The gap was sensitive to zoom level and caused by mismatched pixel alignment between xterm rendering and container layout. Introduces an offset-column rendering approach where xterm renders one additional column while preserving base dimensions for PTY/process semantics. Aligns terminal and UI boundaries by ensuring consistent width calculations and accounting for cell width when communicating dimensions to the PTY. Refines viewport and resize synchronization and internal gap computation to ensure consistent behaviour across devicePixelRatio and zoom levels. Adds tests to verify: - separation between render columns and PTY dimensions - correct process sizing (no offset leakage) - selection gap remains within acceptable bounds This ensures the selection highlight consistently aligns with adjacent UI elements across all zoom/DPR configurations.
Explain the intent behind terminal sizing changes from the previous fix: - xterm renders one extra column for right-edge alignment - PTY/process dimensions continue to use base columns - viewport sync runs on the next frame after resize/zoom - selection-gap metric is documented for regression reasoning - tests include clearer setup and assertion intent comments
Author
|
@microsoft-github-policy-service agree |
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes a macOS high-DPI/zoom-dependent rendering gap at the right edge of the integrated terminal selection highlight by adjusting xterm rendering/layout behavior and adding regression tests around the new sizing approach.
Changes:
- Introduces an “offset column” approach where xterm renders one extra column while keeping PTY/process dimensions at the base column count.
- Adds viewport synchronization and selection-gap measurement logic on resize/zoom/selection changes.
- Updates terminal/xterm styling and adds tests to cover the new column split and selection-gap regression.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/terminal/browser/terminalInstance.ts | Splits xterm render cols vs PTY cols; adjusts pixel-width reporting; increases max canvas width. |
| src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts | Adds zoom/resize viewport sync, scrollbar lane offsetting, and selection-gap measurement scheduling. |
| src/vs/workbench/contrib/terminal/browser/media/xterm.css | Adds .always-show-scrollbar styling intended to stabilize the right edge. |
| src/vs/workbench/contrib/terminal/test/browser/xterm/xtermTerminal.test.ts | Adds selection-gap regression test calling internal helper. |
| src/vs/workbench/contrib/terminal/test/browser/terminalInstance.test.ts | Adds tests ensuring xterm render cols and PTY cols remain separated and process creation uses base dims. |
Conservative upper bound to avoid exceeding typical GPU/browser max texture/canvas widths. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Reserve a consistent right scrollbar lane in terminal layout while preserving normal xterm UX: auto-hide, fade, hover reveal, and interaction when visible. Remove force-visible scrollbar CSS overrides. Separate lane reservation from visibility state. Use max configured/measured width for viewport offset.
Avoid queueing redundant deferred viewport sync callbacks when resize/zoom events fire rapidly. Preserve behavior: immediate sync plus one deferred sync. Track and cancel pending viewport-sync RAF on dispose to prevent stale callbacks after teardown.
Author
|
Hi @benvillalobos just following up on this PR. Let me know if you have any feedback or if anything is needed from my side. Thanks. |
Member
|
Hey @dripfyyy, thanks submitting this PR! I see there's unresolved copilot feedback. If some are left unresolved intentionally, could you comment your reasoning why? Adding area owner @meganrogge |
Author
|
Hey @benvillalobos, thanks! |
Author
|
Hey @benvillalobos and @meganrogge, just a quick update. I’ve addressed all the Copilot feedback. Let me know if there’s anything else needed from my side or if you have any feedback. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On macOS with high-resolution displays, the integrated terminal could
render a visible gap between the selection highlight and adjacent UI
elements (such as the terminal tabs list or panel divider). This gap
was inconsistent and sensitive to zoom level and devicePixelRatio,
sometimes appearing or disappearing as the zoom changed.
Root Cause
The issue was caused by a mismatch between how xterm.js renders the
terminal content and how VS Code computes the layout of the terminal
container.
Specifically:
fractional pixel widths when scaled (zoom/DPR)
different rounding behaviour
causing a visible gap at certain zoom levels
Fix
Introduce an offset-column rendering approach:
covers the available space
preserve correct terminal semantics (e.g. wrapping behaviour)
Additional adjustments:
resize/zoom events to stabilize layout
Testing
Added tests to ensure:
Result
The selection highlight now consistently aligns with adjacent UI
elements across zoom levels and devicePixelRatio configurations,
eliminating the visual gap.