Fixing blurry VSCode, Microsoft Edge on Ubuntu with fractional scaling
New laptops with 2880x1800 OLED screens look great. However, I prefer setting the fractional scaling to 175% to fit more content on the screen. Currently on Ubuntu(22.04 & 24.04 in my case), the fractional scaling process cause some applications to become blurry. In this article, I will show you the workarounds to get VSCode and Microsoft Edge look sharp again. However, there are still other apps that I unfortunately don't have a fix(Kicad, Rawtherapee to name a few). Also, I'll show you how to modify the laucher .desktop file so that the flags we added later will be applied when you click the icon in the laucher.
Microsoft Edge
We need to make Microsoft Edge run with Wayland to have proper fractional scaling.
Try adding the --ozone-platform-hint=auto flag to make Microsoft Edge run with Wayland.
Launch Microsoft Edge from the terminal with the following command.
microsoft-edge --ozone-platform-hint=auto
This should fix the blurry issue(at least it did on my machine).
However, if you use fcitx for keyboard input, this will break it.
Luckily, there is a fix for this. Adding the --gtk-version=4 flag when lauching edge should solve the issue.
microsoft-edge --ozone-platform-hint=auto --gtk-version=4
To modify the .desktop file, locate the original .desktop file and copy it somewhere that doesn't require sudo permission to edit(it's not a necessary step but it will be our lives easier).
That file is usually located at /usr/share/applications/microsoft-edge.desktop.
In the .desktop file, find all lines starting with "Exec" and add the flags. Next, we need to install the .desktop file for the laucher to be updated.
sudo desktop-file-install microsoft-edge.desktop sudo update-desktop-database
Note that the two commands above should be executed in the same directory containing the modified .desktop file.
VSCode
First of all, make sure that you're not using the Snap version of VSCode. If you downloaded it from the App Centre on Ubuntu, that's the Snap version. Uninstall it and download and install the .deb file from microsoft's website.
Next, by launching VSCode with the --ozone-platform-hint=auto flag, the blurriness should be removed.
code --ozone-platform-hint=auto
However, VSCode seems to not work with fcitx no matter what flag I add. So if you need input method provided by fcitx, you need to type it in another text editor and copy it into VSCode.
When modifying the .desktop file, the process is the same as above.
Just note that the file for VSCode is named code.desktop, and we only need to add the --ozone-platform-hint=auto since the other one doesn't work.