Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cursor position is incorrect in the Monaco editor when using Microsoft Edge #1103

Closed
heaths opened this issue Oct 5, 2024 · 12 comments · Fixed by #1106
Closed

Cursor position is incorrect in the Monaco editor when using Microsoft Edge #1103

heaths opened this issue Oct 5, 2024 · 12 comments · Fixed by #1106
Labels
bug The playground isn't doing what it was intended to

Comments

@heaths
Copy link

heaths commented Oct 5, 2024

This appears to be related to #1092 but is a separate issue. When my browser is scaling at 100% (Windows text size is also 100% on a 4K monitor), the cursor trails the text. The more text I type, the more it's off. This makes it extremely hard to use for typing lines over a few characters in length. If I change browser scaling to 90%, things seem to line up even for long lines.

20241005-0041-20.7048071.mp4

Using Microsoft Edge version 131.0.2863.0 (Official build) dev (64-bit).

@shepmaster
Copy link
Member

Which editor have you selected?

@seritools
Copy link

Monaco editor, Edge - I'm seeing it at 110% zoom (+ 150% DPI Scale in Windows, 4K screen), and only at that zoom level does it happen

@shepmaster
Copy link
Member

Would you mind trying out the upstream Monaco instance at https://microsoft.github.io/monaco-editor/playground.html ? That will help narrow down cases. Do you have any alternate browsers that you can check with to see if it reproduces there?

@seritools
Copy link

Doesn't seem to repro in Firefox, upstream Monaco also seems to work

(CTRL+mousewheeled through the different zoom levels)

@shepmaster
Copy link
Member

I do not see this in Edge (129.0.2792.79) on Windows 11 (22631.4249) when using the Monaco editor at 90, 100, or 110% zoom. Any other suggestions for what could be unique on y'alls settings?

@heaths
Copy link
Author

heaths commented Oct 7, 2024

My system text scaling is also 100% on a 4K monitor, which could make a difference. Could this also be a font issue? As you can see in the video, I'm using fixed width (of course) but could the cursor algorithm be miscalculating based on font width? I'm. It using any ligatures-enabled characters either, not that I know of they are even enabled for your Monaco instance anyway.

@shepmaster
Copy link
Member

My system text scaling is also 100%

I assume you mean this setting?

Mine is set to 150%, as is @seritools it appears.

Could this also be a font issue?

Are you going out of your way to set any non-standard fonts on the playground? The playground should be using Source Code Pro as the monospaced font, regardless of your system setting.

[ligatures] are even enabled

They should not be.


What happens when you try the upstream Monaco playground; do you see the same behavior at all?

@shepmaster
Copy link
Member

Could y'all also test with any browser extensions disabled? It looks like opening an "InPrivate" window should do that.

@heaths
Copy link
Author

heaths commented Oct 7, 2024

Nope. Only extension I have is 1Password. I tried disabling that to no avail; however, I'm also not seeing this in InPrivate and I made sure the text zoom is the same. Looking at DevTools, the only difference off hand I'm seeing is that, in InPrivate, there are some sources with "(no domain)" and stylesheets with names like "ace/css/ace-github-dark". I don't see those in non-InPrivate tabs. Maybe this is some issue with how InPrivate discovers sources, or maybe they aren't getting applied somehow to non-InPrivate and are the source of the issue. There's also an "ace_editor.css" that has a lot of font specifications.

I use the Playground a lot and it always worked fine until the recent changes. I don't personally care about the larger font by default (as called out in the other bug), but thinking however it was done is causing an issue with font width calculations. You're not using a zoom factor are you? It will vary depending on system scaling as well as browser scaling. If the font size were changed instead, this shouldn't cause an issue.

@shepmaster
Copy link
Member

and stylesheets with names like "ace/css/ace-github-dark"

When you opened the private browsing, the editor will start out as Ace. Even after you changed the editor to Monaco, I'd expect the Ace CSS files to still be in the network tab. Presumably clearing your cache / reloading the page would keep you on Monaco but not load the Ace styles at all.

the recent changes.

Most likely #1099. The text sizing changes there were mostly incidental; I've been wanting to remove react-monaco-editor for a long time as that project has usually kept me from using the most recent Monaco version. That said, I am now passing the font and font size to Monaco, two things I was not doing before.

@heaths
Copy link
Author

heaths commented Oct 7, 2024

the editor will start out as Ace.

Ah, I didn't even think of that being reset (rather, defaulted). I tried again just now and switched to monaco then Ctrl+F5'd (forced refresh) and can repro the problem in InPrivate.

@shepmaster shepmaster changed the title Cursor position is incorrect when typing Cursor position is incorrect in the Monaco editor when using Microsoft Edge Oct 9, 2024
@shepmaster shepmaster added the bug The playground isn't doing what it was intended to label Oct 9, 2024
@heaths
Copy link
Author

heaths commented Oct 9, 2024

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug The playground isn't doing what it was intended to
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants