High DPI scaling issue: WebView2 on Windows 10 is blurry

[fpieper]

I am using Windows 10 with the new WebView2 (autoinstalled) and I have a high DPI monitor with 125% scaling. The problem is that the whole app looks blurry in this configuration like shown here:
MicrosoftEdge/WebView2Feedback#571 .

Setting scaling to 100% (instead of 125%) "solves" the problem, but is of course not a solution. Therefore it is clearly a scaling issue.

We probably need to properly handle high DPI in the rust code (how is described in the link above).

Thanks for any help in advance 👍

[fpieper]

I see that my issue is similar to this issue #919 and that a possible solution is proposed here webview/webview#54 (comment)
Would be great to have that fixed. Thanks for the help :)

[victorhqc]

I was able to fix this by a workaround pointed out here

Just add the following in your project using Tauri:

Cargo.toml

[target."cfg(windows)".dependencies]
winapi = { version = "0.3.9", features = [ "shellscalingapi" ] }

main.rs

#[cfg(windows)]
extern crate winapi;

fn main() {
  #[cfg(target_os = "windows")]
  unsafe {
    winapi::um::shellscalingapi::SetProcessDpiAwareness(2);
  }

Update
Call SetProcessDpiAwareness as following

winapi::um::shellscalingapi::SetProcessDpiAwareness(1);

More information in my following comments

[nothingismagick]

This is a really interesting fix, and I almost wonder if it should actually be addressed upstream in the webview/webview_rust binding. Its hard for me to think of a situation where you would NOT want high resolution font aliasing (except perhaps in video editing / photo apps)... But it could exist behind a feature flag.

@wusyong - I know you are busy right now with MS Webview, but what are your thoughts about where the fix should happen? Here or upstream?

[victorhqc]

Aha, maybe I know why is not by default. I have a 4K screen in my laptop and a 1080p monitor, and look 😅

Here's in the 4K screen

And here it is in the 1080p monitor

It looks absolutely humongous in 1080p, so the workaround seems to be a patch for 4K screens only 😢 not sure if this behavior can be done dynamically somehow.

[victorhqc]

I changed the code to be

winapi::um::shellscalingapi::SetProcessDpiAwareness(1);

And it seems to do the trick, no more weird oversized window, however not sure why the behavior changes like that. There is some docs here about the API, but the value that the function receives in a regular C++ project, is an enum.

[victorhqc]

I think I know how the values are translated and how to use in Rust.

• PROCESS_DPI_UNAWARE: 3, with this, there's no resizing whatsoever, like the original issue.
• PROCESS_SYSTEM_DPI_AWARE: 2, works ok in 4k, but it's huge in regular 1080p.
• PROCESS_PER_MONITOR_DPI_AWARE: 1, readjusts for each screen as it should.

[wusyong]

It could be fixed straight in upstream. I'll open a PR against webview/webview

[nothingismagick]

That looks right @wusyong. Thanks @victorhqc for tracking this down! Closing this issue because of upstream fix pending.

[victorhqc]

I've noticed that using

winapi::um::shellscalingapi::SetProcessDpiAwareness(1);

Has some weird side effects in the size of the app. In my tauri.conf.json I have the following dimensions

{
  "window": {
    "width": 1400,
    "height": 800
  }
}

And it works fine on Mac OSX for example, but in Windows it quite small for a 4K screen. It looks more like 700 x 400 than 1400 x 800 🤷‍♂️

[nothingismagick]

Hi @victorhqc - we are in the process of moving to https://github.com/tauri-apps/wry - so we will have to reverify all this stuff anyway. Please bear with us. :)

[w-henderson]

Hi, I'm still having this problem on the latest version of Tauri - I tried the workaround but it didn't work. I have a 4K monitor scaled to 1.5x connected to a 1080p monitor at 1x and while it works fine on the 1080p monitor, it is blurry on the 4K one.