Conversation
The <code> element inside #editor-highlight took font-family: monospace from the user-agent stylesheet instead of the stack set on the overlay.
On macOS that is a different font from the text area's ui-monospace, and its taller line box moved the painted text away from the caret a little more on every line.
ColtenOuO
left a comment
There was a problem hiding this comment.
I think we can add a browser test to verify that #editor, #editor-highlight, and its inner <code> have matching computed font styles, so removing font: inherit does not reintroduce text/caret misalignment.
jserv
left a comment
There was a problem hiding this comment.
Check https://github.com/sysprog21/codetrial/blob/main/CONTRIBUTING.md carefully and rework git commit message.
|
Superseded by PR #204, close this one. For future changes: when a review asks for changes, please update the existing pull request instead of opening a new one. Amend the commit (or add a new one), then push to the same branch, using git push --force-with-lease after an amend or rebase. The PR picks up the new commits automatically, and the review history stays in one place. A second PR splits the discussion across two threads, so maintainers have to work out which one is current and which comments still apply |
Makes the highlight overlay inherit the editor font so the caret stays aligned on macOS.
Tested on macOS with Safari 27.0 (22625.1.29.11.27). The caret drifted away from the highlighted text in every test I ran, and the gap grew with the number of lines. After running
document.querySelector("#editor-highlight code").style.font = "inherit"in the developer console, the caret stayed aligned with the text on every line.Closes #82
Summary by cubic
Fixes the highlight overlay so the caret stays aligned with the text on macOS. The
<code>element inside#editor-highlightwas using the user-agent monospace font instead of the overlay’s font stack, which made the caret drift downward as lines increased. Now#editor-highlight codeinherits the editor font, keeping the caret aligned. Closes #82.Written for commit 5ab9c2c. Summary will update on new commits.