-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
FINALLY fix blurry canvas/webgl renderer issues due to device pixel rounding errors 🎉 #3926
Conversation
This uses the ResizeObserver devicePixelContentBoxSize API in order to fetch the exact device pixel dimensions from the browser. The old possibly blurry behavior is used as a fallback if that API is not available. Part of xtermjs#2662 Part of microsoft/vscode#85154
Required for devicePixelContentBoxSize ResizeObserver API
Hey @Tyriar, thanks for taking care of this! I just checked out your branch to test this on my machine. Is this fix automatically applied when I run My first test unfortunately did not show any improvement compared to master, still having non-consistent character rendering throughout the line (sharp on the left and right edges, blurry in the middle): Checking the canvas element's properties in the DOM: It shows that the zoom factor is still not exact:
Should be |
@carlfriedrich the zoom factor shouldn't matter if it's not perfect with this method as we're querying the browser for the exact device pixel dimensions of the canvas. You may be using a browser that doesn't support the API in which case we fallback to the original possibly blurry method? |
@Tyriar Hmm, not sure if I understand that correctly. What browser would you recommend? |
You also need to run yarn and restart the build or your won't get a successful compile |
@carlfriedrich make sure you run |
@carlfriedrich to fix that you'll need to run |
@Tyriar Ah yep, I already recognized that myself. Now So the font is indeed crisp, thumbs up! 👍 In my Firefox, however, the rendering is the same as before. Does that mean that Firefox does not support the new API? Wouldn't be a problem, since VS Code will be the place where it is supposed to work, just curious. |
Great! I didn't check Firefox, but yes vscode is based on electron which uses chromium underneath. I didn't check whether the current version of vscodes electron will have it yet, if not it will get fixed in vscode eventually after an electron update. |
Fixes #2662
Part of microsoft/vscode#85154
Below tested on Edge 105 (dev) on Windows 11 (set at 100% scale) with the webgl renderer. The same fix applies also to the canvas renderer.
Zoom 50%
Zoom 67%
Zoom 75%
Zoom 80%
Zoom 90%
Zoom 100%
Zoom 110%
Zoom 125%
Zoom 150%
Zoom 175%