Description
What happened?
Content of WebView2 is sometimes shifted in high DPI compatible application.
Importance
Important. My app's user experience is significantly compromised.
Runtime Channel
Stable release (WebView2 Runtime)
Runtime Version
136.0.3240.92
SDK Version
1.0.3240.44
Framework
WPF
Operating System
Windows 11
OS Version
22631.5189
Repro steps
Sample code
- MainWindow.xaml
<Window
x:Class="WebView2Sample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WebView2Sample"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Grid>
<TabControl>
<TabItem Header="Tab1">
<Border
Background="Pink"
BorderBrush="Red"
BorderThickness="2">
<wv2:WebView2 Source="https://www.microsoft.com/en-us/" />
</Border>
</TabItem>
<TabItem Header="Tab2">
<Border
Background="Pink"
BorderBrush="Red"
BorderThickness="2">
<wv2:WebView2 Source="https://www.microsoft.com/en-us/" />
</Border>
</TabItem>
</TabControl>
</Grid>
</Window>
- app.manifest
<?xml version="1.0" encoding="utf-8"?>
<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
<assemblyIdentity version="1.0.0.0" name="MyApplication.app"/>
<trustInfo xmlns="urn:schemas-microsoft-com:asm.v2">
<security>
<requestedPrivileges xmlns="urn:schemas-microsoft-com:asm.v3">
<requestedExecutionLevel level="asInvoker" uiAccess="false" />
</requestedPrivileges>
</security>
</trustInfo>
<compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
<application>
<!-- Windows Vista -->
<!--<supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}" />-->
<!-- Windows 7 -->
<!--<supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}" />-->
<!-- Windows 8 -->
<!--<supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}" />-->
<!-- Windows 8.1 -->
<!--<supportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}" />-->
<!-- Windows 10 -->
<!--<supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />-->
</application>
</compatibility>
<!-- support high dpi -->
<application xmlns="urn:schemas-microsoft-com:asm.v3">
<windowsSettings>
<dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">True/PM</dpiAware>
<dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
</windowsSettings>
</application>
</assembly>
Environmental
I'm using laptop PC and 2 monitors.
a) Laptop PC
Resolution: 1536 x 864 px
Physical Size: 31 mm x 17 mm
DPI: Horizontal = 1258.53, Vertical = 1290.92
b) Monitor-1
Resolution: 3440 x 1440 px
Physical Size: 80 mm x 35 mm
DPI: Horizontal = 1092.2, Vertical = 1045.03
c) Monitor-2
Resolution: 1920 x 1080 px
Physical Size: 50 mm x 29 mm
DPI: Horizontal = 975.36, Vertical = 945.93
Steps
-
Connect laptop PC and Monitor-1.
-
Launch sample application and maximize it on display of laptop PC
-
Select Tab1 --> Tab2 --> Tab1.
-
Disconnect Monitor-1, and connect laptop PC and Monitor-2.
-
Move the application to Monitor-2.
-
Select Tab1 --> Tab2 --> Tab1.
-
Disconnect Monitor-2, and connect laptop PC and Monitor-1, then the application will be displayed on laptop PC.
-
Select Tab1 --> Tab2. — at this point, the WebView2 area appears to be shifted.
Repros in Edge Browser
No, issue does not reproduce in the corresponding Edge version
Regression
No, this never worked
Last working version (if regression)
No response