Display scaling on Linux

[firelizzard18]

Description

Wails and/or WebKit GTK does not handle display scaling correctly. I don't know if this is a Wails issue or an upstream WebKit GTK issue.

To Reproduce

1. Have a Linux PC
2. Set display scaling to > 100% (I have it set to 150%)
3. Create a new Wails app from the React template
4. Run it

I made no changes since the issue is evident in the unmodified template.

Expected behaviour

Display scaling behaves consistently. This issue is clearly related to HTML rendering since it is not present if I view the app with Firefox.

Screenshots

I removed the logo to make the issue clearer. This is how the app appears natively:

This is how it appears in Firefox:

Attempted Fixes

I've looked for and failed to find WebKit GTK issues relating to display scaling.

System Details

# Wails
Version         | v2.5.1                                  
Revision        | 7f402bf0c42fe87669ae0faf96407a308f768bdb
Modified        | false                                   
Package Manager | emerge                                  

# System
┌─────────────────────────┐
| OS           | Gentoo   |
| Version      | 2.13     |
| ID           | gentoo   |
| Go Version   | go1.20.5 |
| Platform     | linux    |
| Architecture | amd64    |
└─────────────────────────┘

# Dependencies
┌─────────────────────────────────────────────────┐
| Dependency | Package Name | Status    | Version |
| *docker    | Unknown      | Not Found | 23.0.3  |
| gcc        | Unknown      | Not Found | 12.3.1  |
| libgtk-3   | Unknown      | Not Found |         |
| libwebkit  | Unknown      | Not Found |         |
| npm        | Unknown      | Not Found | 8.19.4  |
| pkg-config | Unknown      | Not Found | 1.8.1   |
└──────────── * - Optional Dependency ────────────┘

# Diagnosis
 WARNING  Your system has missing dependencies!
Fatal:
Required dependencies missing: gcc libgtk-3 libwebkit npm pkg-config
Please read this article on how to resolve this: https://wails.io/guides/resolving-missing-packages

 ♥   If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

Additional context

I am looking for a WebKit GTK based browser (that isn't the monstrosity of Chrome/Chromium) to test with.

I'm not sure why wails doctor thinks I have missing dependencies. I can run apps so clearly I have what I need.

[firelizzard18]

Here's the reproduction: https://gitlab.com/ethan.reesor/contrib/wails-scaling-issue. I installed Ant Design before I realized the unmodified template reproduced the issue.

[firelizzard18]

I can reproduce the issue in Epiphany, so it looks to be an upstream WebKit GTK issue.

[leaanthony]

Thanks for opening this.
The webkit2gtk Issue Tracker can sometimes provide insights into upstream bugs. Perhaps we need to bump the version up

[firelizzard18]

Since it renders fine in Falkon, which uses QtWebEngine which is Chromium based, it seems like the issue is specific to WebKit GTK, not WebKit itself. Or maybe it's specific to WebKit GTK 4 - I have no clue if that is tied to a specific WebKit version or not.

[firelizzard18]

I had looked for WebKit GTK bug reports but apparently I hadn't looked hard enough. I think this is the culprit:

• [GTK] Changing system font-scaling factor results in messy rendering of the page (Epiphany, WebKitGtk)

Other possibly relevant reports:

• https://bugs.webkit.org/show_bug.cgi?id=225912
• https://bugs.webkit.org/show_bug.cgi?id=242439

[firelizzard18]

For reference, here's Falkon:

[firelizzard18]

I attached my screenshots to the upstream bug and made a comment

[firelizzard18]

This appears to be specific to X11. I'm using KDE and SDDM which lets me login using X11 or using Wayland. When start my session with Wayland the issue is no longer present.

[leaanthony]

Oh great... When I last tested on Wayland, you couldn't center a window because the Wayland gods had decided that applications should be told where they are placed. Just like the gnome gods decided that tray icons shouldn't exist so now everyone has to install a 3rd party library to make them work.

Sometimes I feel like the Linux desktop has a death wish! 😅

[firelizzard18]

I was just curious if it might fix things, and Plasma makes it really easy to switch. And I wanted to take some screenshots for documentation so I wanted them to look nice. I switched back immediately because X11 works fine for me and I have everything configured the way I want it. The most noticeable difference was actually the cursor speed/acceleration.

[leaanthony]

Thanks for the info and sorry about the rant 😅 I just want it to be as easy as the other platforms 😭

[mooijtech]

References https://gitlab.gnome.org/GNOME/gtk/-/issues/3787

[Bushikot]

Same issue. Maybe this information will be useful: OS: Manjaro Linux 23.0.2 KDE/Wayland HiDPI display Wails: v2.6.0 gtk3: 1:3.24.38-1 webkit2gtk: 2.40.5-2

UPD: and it got fixed by this: export GDK_BACKEND=wayland

[leaanthony]

It seems not one size fits all for this so I propose we move it to config. Ideally we'd be able to automatically detect the best value but I'm not sure how that would be done

[firelizzard18]

GDK_BACKEND=wayland does not work for me. I use SDDM and there's a dropdown for the window server which I leave on X11, so I suspect Wayland simply isn't running. If I change that dropdown it works, but the GDK_BACKEND workaround is not viable for anyone who is not running with Wayland. Here's the error:

Gtk-Message: 21:14:24.638: Failed to load module "canberra-gtk-module"

(accumulate:188686): Gtk-WARNING **: 21:14:24.638: cannot open display: :0