#19209: WebView2 renders fuzzy pages on 4K screens when OS has scaling > 100% (Windows)

[wxTrac]

#19209: WebView2 renders fuzzy pages on 4K screens when OS has scaling > 100%
(Windows)
-----------------------------------+-------------------------
Reporter: GerHobbelt | Owner:
Type: defect | Status: new
Priority: normal | Milestone: 3.2.0
Component: WebView | Version: dev-latest
Keywords: webview2 edge 4K hdpi | Blocked By:
Blocking: | Patch: 0
-----------------------------------+-------------------------
Problem: the rendering of the HTML pages is fuzzy.

Observed when running the wxWidgets `webview` example, after having
installed the latest WebView2 prerelease to ensure we're at the bleeding
edge of Edge/WebView2.

This problem does *not* occur with the WebView2 sample applications
provided by Microsoft itself. (All this cf. https://docs.microsoft.com/en-
us/microsoft-edge/webview2/get-started/win32 & related web pages there.)

Circumstances:
Windows 10/64bit, latest OS updates, latest Visual Studio 2019, fresh
build of the wxWidgets github source tree using the provided VC16
(MSVC2019) solution.

Seems this is a problem that more folks are / have been dealing with, e.g.
System Setup is nearly the same as described here:
https://community.ptc.com/t5/System-Administration/Creo-Parametric-4-0
-embedded-chromium-browser-display-issue-with/td-p/493194
, only I have 150% scaling.

[[Image(https://community.ptc.com/t5/image/serverpage/image-
id/3473i3377B51CF026EBB7/image-size/large?v=v2&px=999)]]

[[Image(https://community.ptc.com/t5/image/serverpage/image-
id/3474i2D370F01D78AD537/image-size/large?v=v2&px=999)]]

Relevant parts copy:

Windows Scale and Layout set to something larger than 100%

* common on higher resolution (> 1920 x 1200/1080) monitors to set this
larger than 100%

* 150% is common on a 4k monitor

With the above setup the embedded browser contains fuzzy content. Looks
the same as zooming greater than 100% on an image in an image viewer.

(I do NOT have the glitching effects reported for PTC Creo in that URL;
only the fuzzy page views, consistently. It's just that that page popped
up in a google search as the closest match and had a very good description
of the circumstances otherwise.)

Notes:

I've observed similar fuzzy=scaling issues when we trialed CEF in a C#
wrapper on Windows earlier this year (that was *without* using wxWindows
of course: C#/WPF), but have not pursued that then as there were other
problems observed at the time which had us decide it was a much less
desirable venue for development (unless nothing better would be
available).

Apparently embedders need to blow some magic smoke up the
WebView2/Chromium chimney to make it go away and get a crisp render on
HDPI screens. Haven't found yet what the magic incantation is, though.

--
Ticket URL: <https://trac.wxwidgets.org/ticket/19209>

[wxTrac]

#19209: WebView2 renders fuzzy pages on 4K screens when OS has scaling > 100%
(Windows)

-------------------------+-----------------------------------

Reporter: GerHobbelt | Owner:
Type: defect | Status: new
Priority: normal | Milestone: 3.2.0
Component: WebView | Version: dev-latest

Resolution: | Keywords: webview2 edge 4K hdpi

Blocked By: | Blocking:
Patch: 0 |

-------------------------+-----------------------------------
Changes (by ericj):

* cc: ericj (added)


Comment:

This sounds like your application is not marked as "dpi-aware".

As you're using Visual Studio, the option can be found at:
Project Properties -> Configuration Properties -> Manifest Tool -> Input
and Output -> DPI Awareness

--
Ticket URL: <https://trac.wxwidgets.org/ticket/19209#comment:1>

[wxTrac]

#19209: WebView2 renders fuzzy pages on 4K screens when OS has scaling > 100%
(Windows)

-------------------------+-----------------------------------

Reporter: GerHobbelt | Owner:
Type: defect | Status: new
Priority: normal | Milestone: 3.2.0
Component: WebView | Version: dev-latest

Resolution: | Keywords: webview2 edge 4K hdpi

Blocked By: | Blocking:
Patch: 0 |

-------------------------+-----------------------------------
Changes (by GerHobbelt):

* cc: ger@… (added)


Comment:

@ericj: thanks!

Tested your advice: edited the settings in the /samples/webview/ project
and resulting binary rendered CRISP WebView2 (Edge v91) panels!

Tested with both 'DPI Awareness' and the 'per monitor (V2)' variant and
both give CRISP results on the 4K screen.


The funny bit was that the rest of that UI, i.e. the wxWidgets native
buttons and text, were already crisp, it was just the HTML content that
was fuzzy.

----

In case anyone else stumbles across this issue:

- make sure your EXE project is set to 'Generate Manifest: YES' as per
https://stackoverflow.com/questions/55906598/iswindows10orgreater-always-
returns-false-even-with-manifest-file

- general info from Microsoft, useful but without mentioning those MSVC
settings anywhere I could see: https://docs.microsoft.com/en-
us/windows/win32/hidpi/high-dpi-desktop-application-development-on-windows

- @ericj's answer only popped up in web search for old MFC pages (the ex-
MSDN Exercise 1+2 pages linked at in the first item below have already
lost it images, so we're looking at stuff that's rusting as we speak:

+ https://social.msdn.microsoft.com/forums/vstudio/en-
US/27e99073-18d9-4be0-a648-ed4481dd53e4/how-to-design-an-mfc-app-that-
will-work-with-dpi-and-all-resolutions#bf9123e3-13cb-4d49-a2ad-
987f6ca58f2b-isAnswer

+ https://www.codeguru.com/cpp/article.php/c17985/C-Programming-Better-
Accessibility-with-High-DPI-Support-and-MFC-10.htm#page-2 (here with
pictures, hopefully kept alive in better shape than the previous link)

--
Ticket URL: <https://trac.wxwidgets.org/ticket/19209#comment:2>

[wxTrac]

#19209: WebView2 renders fuzzy pages on 4K screens when OS has scaling > 100%
(Windows)

-------------------------+-----------------------------------
Reporter: GerHobbelt | Owner:
Type: defect | Status: closed

Priority: normal | Milestone: 3.2.0
Component: WebView | Version: dev-latest

Resolution: invalid | Keywords: webview2 edge 4K hdpi

Blocked By: | Blocking:
Patch: 0 |

-------------------------+-----------------------------------
Changes (by vadz):

* status: new => closed
* resolution: => invalid


--
Ticket URL: <https://trac.wxwidgets.org/ticket/19209#comment:3>