Skip to content

[Problem/Bug]: display position of the content is shifted in high DPI compatible application #5263

Open
@YuuukiA

Description

@YuuukiA

What happened?

Content of WebView2 is sometimes shifted in high DPI compatible application.

Image

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

  1. Connect laptop PC and Monitor-1.

  2. Launch sample application and maximize it on display of laptop PC

  3. Select Tab1 --> Tab2 --> Tab1.

  4. Disconnect Monitor-1, and connect laptop PC and Monitor-2.

  5. Move the application to Monitor-2.

  6. Select Tab1 --> Tab2 --> Tab1.

  7. Disconnect Monitor-2, and connect laptop PC and Monitor-1, then the application will be displayed on laptop PC.

  8. 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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions