WebView has rendering glitches on Windows in high DPI mode

[Jzhenli]

Describe the bug

Thanks for your hard work on toga V0.5.0 released, I find it has improved DPI Scaling on Windows, but after try, seems there is a little issue. My laptop system is Windows 11 with a screen resolution of 2240x1400 and scaling at 150%. There is an external display connected to the laptop, with a resolution of 2560x1440 and scaling at 100%. When my Toga application is displayed on the external display, it works normally. However, when I drag and drop it onto the laptop's own screen, there will be a large shadow on the Toga application. As shown in the following picture.

Attached is the example code to reproduce it.

helloworld.zip

Environment

• Operating System: win11
• Python version: 3.10
• Software versions:
  • Briefcase: 0.3.22
  • Toga: 0.5.0

[freakboy3742]

Thanks for that example.

To confirm what you're seeing - do you see this behavior if the webserver is outside the app? i.e., is this an issue with the WebView, or an issue with something about the webview interacting with the server on the same app? To put it another way - do you see this behavior with Toga Tutorial 3?

Also is the visual corruption "permanent", or does it repaint without the "shadow" if you scroll/refresh the web view?

(Unfortunately, I don't have a multi-monitor Windows setup, so I can't test this myself)

[Jzhenli]

@freakboy3742 Hi, I have tested it with toga v0.4.9, it works well. But when updated to toga v0.5.0, this issue appears. If refresh the web view manually, the shadow won't disappear.

[freakboy3742]

Thanks, that confirms the second question - what about the first question? Do you see this behavior with Tutorial 3?

[Jzhenli]

@freakboy3742 Use toga Webview to display OpenAPI swagger documentation,

1. When testing with toga version 0.5.0, this issue may occur regardless of whether the server is running inside or outside the application.
2. When testing with toga version 0.4.9, no such issue was observed regardless of whether the server is running inside or outside the application.

below picture is my testing toga v0.5.0 with the tutorial3 to display an outside server api, there's a line in the app.

[Jzhenli]

Hi, I find when this problem occurs, we need to click the "-" button at the top right corner of the application to minimize it, and then click the application icon on the taskbar, the shadow on the application will disappear. However, if you drag and drop the app to another display, this problem will recur. Just repeat the above steps and it will display normally. @freakboy3742

[mhsmith]

So far all the examples have been with your Swagger page. But does the problem happen with an unmodified copy of tutorial 3, which displays beeware.org? Or with any other websites?

[Jzhenli]

@mhsmith @freakboy3742

1. test with unmodified copy of tutorial 3, both toga v0.5.0 and v0.4.9 works well.
2. test with swagger page, toga v0.4.9 works well, but v0.5.0 have some issues.

[freakboy3742]

I'm somewhat at a loss to explain what is going on here. The only change in the Webview between 0.4.9 and 0.5.0 is the addition of cookie support (which you're not really using here); the only other change of note that could be interacting here is the set of changes related to improving support of HiDPI mode - but those changes are at the level of re-evaluating window geometry, not doing anything to the window content.

The fact that this is manifesting when you move between screens with different DPIs suggests to me that this might actually be an issue with Microsoft's Edge plugin not handling DPI changes correctly, not a Toga issue. That's not something we're in a position to fix, unless there's a "force redraw" API (or similar) that we should be calling on a screen change. If a redraw is required, my guess is that what is missing is an invocation of widget._impl.native.Invalidate() or widget._impl.native.Refresh(), either on the webview, or on the window itself, when the Winforms window's update_dpi() method is invoked.

Unfortunately, I can't test this myself as I don't have a multi-monitor setup on my Windows test machine.

[mhsmith]

There's not much we can do to investigate an issue that only occurs on a private website of your own. Please try using the WebView to display some public websites, and if you can reproduce the problem, post their URLs and screenshots here.

Or if you can do it with a static HTML file that you can share with us, that would be even better.

[Jzhenli]

@mhsmith This is not my personal website. The Swagger page is automatically generated by FastAPI. You can try any FastAPI application. It will always has a Swagger page. More info you can refer to FastAPI. If you want to test my code, here is an example.

helloworld.zip

[mhsmith]

When running your app with briefcase dev, I'm seeing similar issues when resizing the window: lines are left behind as it expands:

The lines remain in the same place as you scroll and interact with the page, and the content is drawn on top of them as if they were part of the window background. Moving the window doesn't make them go away, but minimizing and restoring it does.

I can reproduce this on both Windows 10 and 11, on a single screen, as long as the DPI scale is more than 100%.

1. test with unmodified copy of tutorial 3, both toga v0.5.0 and v0.4.9 works well.
2. test with swagger page, toga v0.4.9 works well, but v0.5.0 have some issues.

I'm seeing the same things. Maybe tutorial3 isn't affected because it draws over the entire WebView, and the background isn't visible?

the only other change of note that could be interacting here is the set of changes related to improving support of HiDPI mode - but those changes are at the level of re-evaluating window geometry, not doing anything to the window content.

#2155 also changed the DPI awareness mode of the app, so it's possible that had an effect on the native WebView's behavior.