MicrosoftEdge / MicrosoftEdge/WebView2Feedback

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

Open
#5,263 4 comments 0 reactions 1 assignee View on GitHub

@Badhri is already working on this.

Since Jun 3, 2025.

bug
Dominant language
PowerShell
Stars
526
Forks
67
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.