Winform (NetCore) version in high DPI mode cannot get the correct client size

[scegg]

• What version of the product are you using?

  • 101.0.180
  • NuGet (CefSharp.WinForms.NETCore)

• What architecture x86 or x64?
  x64

• What version of .Net?
  .Net 6.0

• On what operating system?
  Win11

• Are you using WinForms, WPF or OffScreen?
  WinForms

• What steps will reproduce the problem?

1. Use a high DPI screen, for example a 4k one, with default setting of Windows.
2. Place the chromium to the form.
3. Nav to a long page.
4. Get the height of the page. Any way will get the same result: js get the main div height if possible, js get body scrollHeight and call GetContentSizeAsync.
5. Set the height of chromium control to the value. And write the value down.

• What is the expected output? What do you see instead?

1. The scrollbar of the browser should not be visible if the height is getting correctly but it's not.
2. The value should be the same as doing it in Chrome app or OffScreen component, but it's not.
3. For default setting, Windows use 150% scale on the 4K display. The value of the height gotten from Chrome app and the OffScreen component is just 1.5 times to the value get from WinForm version.

[amaitland]

1. What DPI Awareness does your application have?

2. Do you have the Windows 10 compatibility entries in your app.manifest? (My understanding Windows 11 uses the same key as Windows 10).

Please confirm you can reproduce the issue with the MinimalExample. The NetCore solution can target .Net 6.0.

This is unlikely a bug in CefSharp, if changes are required then they will likely be in CEF. If that's the case this issue will be closed as upstream.

[scegg]

1. What DPI Awareness does your application have?
2. Do you have the Windows 10 compatibility entries in your app.manifest? (My understanding Windows 11 uses the same key as Windows 10).

Please confirm you can reproduce the issue with the MinimalExample. The NetCore solution can target .Net 6.0.

This is unlikely a bug in CefSharp, if changes are required then they will likely be in CEF. If that's the case this issue will be closed as upstream.

1 None. I use the default net6 windows form without any DPI Awareness changing.
2 No.

By putting app.manifest as code below still won't fix this problem.

<?xml version="1.0" encoding="utf-8"?>
<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
  <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>

  <asmv3:application>
    <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">
      <dpiAware>true/PM</dpiAware>
    </asmv3:windowsSettings>
  </asmv3:application>

  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>
      <!-- A list of all Windows versions that this application is designed to work with. 
            Windows will automatically select the most compatible environment.-->

      <!-- 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>
</assembly>

It cannot be reproduced using MinimalExample core version. Any other need to be set other than default application?

In my app, I just drag the control to the form, use chromiumWebBrowser1.Load(url) to load the target. That's all.

[amaitland]

It cannot be reproduced using MinimalExample core version. Any other need to be set other than default application?

Converting to discussion as MinimalExample works.

None. I use the default net6 windows form without any DPI Awareness changing.

The MinimalExample is DPI Aware and it's recommended that your application is also. See https://github.com/cefsharp/CefSharp/wiki/General-Usage#winforms-high-dpi

I'd suggest confirming in Task Manager that your application is actually DPI Aware.

By putting app.manifest as code below still won't fix this problem.

Make sure your project file is actually using the manifest see https://github.com/cefsharp/CefSharp.MinimalExample/blob/master/CefSharp.MinimalExample.WinForms/CefSharp.MinimalExample.WinForms.netcore.csproj#L18 for an example.

If the project is created from a computer without display scale setting other than 100%, the program will work without any problem, even from the computer with display scaling.
On the other hand, if the project is created from a computer with display scale setting other than 100%, the program will NOT work correctly on the same computer, either the 100% scaling one. Even re-editing the project from the 100% scaling computer won't fix it.

It's unclear what you mean by this.

As the MinimalExample works you'll need to compare your application.

[scegg]

If the project is created from a computer without display scale setting other than 100%, the program will work without any problem, even from the computer with display scaling.
On the other hand, if the project is created from a computer with display scale setting other than 100%, the program will NOT work correctly on the same computer, either the 100% scaling one. Even re-editing the project from the 100% scaling computer won't fix it.

[scegg]

Actually, I think this is a well-known issue about Visual Studio Form Designer. But it affects cefsharp when getting pixel related values.

[amaitland]

Actually, I think this is a well-known issue about Visual Studio Form Designer. But it affects cefsharp when getting pixel related values.

For me that's very unlikely.

• Confirm your app is PER monitor V2 DPI aware
• Confirm your app has the manifest applied.
• Compare your app to the MinimalExample

If you you require further assistance then you'll need to provide a example that reproduces the problem (no zip files).

[scegg]

Actually, I think this is a well-known issue about Visual Studio Form Designer. But it affects cefsharp when getting pixel related values.

For me that's very unlikely.

• Confirm your app is PER monitor V2 DPI aware
• Confirm your app has the manifest applied.
• Compare your app to the MinimalExample

If you you require further assistance then you'll need to provide a example that reproduces the problem (no zip files).

app.manifest is applied as the content I posted above.
I'm writing a minimal demo app to reproduce the issue.

[scegg]

By writing the minimal demo app, I found the result vary based on the testing page. But in most case, OffScreen and UIbased one report differently.

IssueRepo.zip

It may not related to DPI problem.

[amaitland]

IssueRepo.zip

It may not related to DPI problem.

As I said, no zip files. I won't open zip/binary files.

[scegg]

Because github don't allow to upload "manifest" file, you can leave the zip here since nothing we can do.

[amaitland]

I'm not going to review the zip file.

[scegg]

app.manifest

<?xml version="1.0" encoding="utf-8"?>
<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
  <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>

  <asmv3:application>
    <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">
      <dpiAware>true/PM</dpiAware>
    </asmv3:windowsSettings>
  </asmv3:application>

  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>
      <!-- A list of all Windows versions that this application is designed to work with. 
            Windows will automatically select the most compatible environment.-->

      <!-- 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>
</assembly>

Form1.cs

using System.Runtime.InteropServices;
using CefSharp;

namespace IssueRepo
{
    public partial class Form1 : Form
    {
        string urlForTesting = "https://github.com/";

        private const string jsToGetHeight =
            "(function() { return Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight);})();";

        public Form1()
        {
            InitializeComponent();
        }

        private void button2_Click(object sender, EventArgs e)
        {
            urlForTesting = comboBox1.Text;
            chromiumWebBrowser1.Load(urlForTesting);
        }

        private void button1_Click(object sender, EventArgs e)
        {
            Test();
        }

        private async Task Test()
        {
            //test 1: Get result from UI-based function
            var test1 = (await chromiumWebBrowser1.GetContentSizeAsync()).Height;

            //test 2: Get result from JS on UI-based
            var test2 = (int)(await chromiumWebBrowser1.EvaluateScriptAsync(jsToGetHeight)).Result;

            //test 3: Get result from Off-Screen
            var test3 = await GetFromOffScreen();

            //get scale:
            var scale = GetDisplayScaleFactor(Handle);

            MessageBox.Show($"GetContentSize: {test1}\r\nJSReportFromUI: {test2}\r\nJSReportFromOffScreen: {test3}\r\nGetContentSize*Scale: {test1*scale}\r\nJSReportFromUI*Scale: {test2*scale}");
        }

        private async Task<int> GetFromOffScreen()
        {
            using var l = new AutoResetEvent(false);
            using var browser = new CefSharp.OffScreen.ChromiumWebBrowser(urlForTesting);
            browser.Size = new Size(chromiumWebBrowser1.Width, chromiumWebBrowser1.Height);
            browser.LoadingStateChanged += (s, e) => { if (!e.IsLoading) l.Set(); };

            l.WaitOne();

            await Task.Delay(5000); //wait for loading finish.

            var docHeight = (int)(await browser.EvaluateScriptAsync(jsToGetHeight)).Result;
            return docHeight;
        }

        [DllImport("user32.dll")]
        static extern int GetDpiForWindow(IntPtr hWnd);

        static float GetDisplayScaleFactor(IntPtr windowHandle)
        {
            try
            {
                return GetDpiForWindow(windowHandle) / 96f;
            }
            catch
            {
                // Or fallback to GDI solutions above
                return 1;
            }
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            comboBox1.SelectedIndex = 0;
        }
    }
}

Form1.resx

<root>
  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
    <xsd:element name="root" msdata:IsDataSet="true">
      <xsd:complexType>
        <xsd:choice maxOccurs="unbounded">
          <xsd:element name="metadata">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" />
              </xsd:sequence>
              <xsd:attribute name="name" use="required" type="xsd:string" />
              <xsd:attribute name="type" type="xsd:string" />
              <xsd:attribute name="mimetype" type="xsd:string" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="assembly">
            <xsd:complexType>
              <xsd:attribute name="alias" type="xsd:string" />
              <xsd:attribute name="name" type="xsd:string" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="data">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
              <xsd:attribute ref="xml:space" />
            </xsd:complexType>
          </xsd:element>
          <xsd:element name="resheader">
            <xsd:complexType>
              <xsd:sequence>
                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
              </xsd:sequence>
              <xsd:attribute name="name" type="xsd:string" use="required" />
            </xsd:complexType>
          </xsd:element>
        </xsd:choice>
      </xsd:complexType>
    </xsd:element>
  </xsd:schema>
  <resheader name="resmimetype">
    <value>text/microsoft-resx</value>
  </resheader>
  <resheader name="version">
    <value>2.0</value>
  </resheader>
  <resheader name="reader">
    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
  <resheader name="writer">
    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>
</root>

Form1.Designer.cs

namespace IssueRepo
{
    partial class Form1
    {
        /// <summary>
        ///  Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        ///  Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        ///  Required method for Designer support - do not modify
        ///  the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.groupBox1 = new System.Windows.Forms.GroupBox();
            this.chromiumWebBrowser1 = new CefSharp.WinForms.ChromiumWebBrowser();
            this.button1 = new System.Windows.Forms.Button();
            this.label1 = new System.Windows.Forms.Label();
            this.button2 = new System.Windows.Forms.Button();
            this.comboBox1 = new System.Windows.Forms.ComboBox();
            this.groupBox1.SuspendLayout();
            this.SuspendLayout();
            // 
            // groupBox1
            // 
            this.groupBox1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
            | System.Windows.Forms.AnchorStyles.Left) 
            | System.Windows.Forms.AnchorStyles.Right)));
            this.groupBox1.Controls.Add(this.chromiumWebBrowser1);
            this.groupBox1.Location = new System.Drawing.Point(12, 131);
            this.groupBox1.Name = "groupBox1";
            this.groupBox1.Size = new System.Drawing.Size(631, 540);
            this.groupBox1.TabIndex = 0;
            this.groupBox1.TabStop = false;
            // 
            // chromiumWebBrowser1
            // 
            this.chromiumWebBrowser1.ActivateBrowserOnCreation = true;
            this.chromiumWebBrowser1.Dock = System.Windows.Forms.DockStyle.Fill;
            this.chromiumWebBrowser1.Location = new System.Drawing.Point(3, 27);
            this.chromiumWebBrowser1.Name = "chromiumWebBrowser1";
            this.chromiumWebBrowser1.Size = new System.Drawing.Size(625, 510);
            this.chromiumWebBrowser1.TabIndex = 0;
            this.chromiumWebBrowser1.Text = "chromiumWebBrowser1";
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(455, 79);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(185, 34);
            this.button1.TabIndex = 1;
            this.button1.Text = "Step 2: Test";
            this.button1.UseVisualStyleBackColor = true;
            this.button1.Click += new System.EventHandler(this.button1_Click);
            // 
            // label1
            // 
            this.label1.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left) 
            | System.Windows.Forms.AnchorStyles.Right)));
            this.label1.Location = new System.Drawing.Point(15, 9);
            this.label1.Name = "label1";
            this.label1.Size = new System.Drawing.Size(628, 57);
            this.label1.TabIndex = 2;
            this.label1.Text = "Please wait several seconds before pressing the Test button, letting the page loa" +
    "ded. Test will need 5 secs.";
            // 
            // button2
            // 
            this.button2.Location = new System.Drawing.Point(253, 79);
            this.button2.Name = "button2";
            this.button2.Size = new System.Drawing.Size(185, 34);
            this.button2.TabIndex = 3;
            this.button2.Text = "Step1: Load";
            this.button2.UseVisualStyleBackColor = true;
            this.button2.Click += new System.EventHandler(this.button2_Click);
            // 
            // comboBox1
            // 
            this.comboBox1.FormattingEnabled = true;
            this.comboBox1.Items.AddRange(new object[] {
            "https://github.com",
            "https://www.microsoft.com/en-us?ql=2",
            "https://shop.vistopia.com.cn/detail?id=195"});
            this.comboBox1.Location = new System.Drawing.Point(15, 80);
            this.comboBox1.Name = "comboBox1";
            this.comboBox1.Size = new System.Drawing.Size(232, 33);
            this.comboBox1.TabIndex = 4;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(10F, 25F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(655, 683);
            this.Controls.Add(this.comboBox1);
            this.Controls.Add(this.button2);
            this.Controls.Add(this.label1);
            this.Controls.Add(this.button1);
            this.Controls.Add(this.groupBox1);
            this.Name = "Form1";
            this.Text = "Form1";
            this.Load += new System.EventHandler(this.Form1_Load);
            this.groupBox1.ResumeLayout(false);
            this.ResumeLayout(false);

        }

        #endregion

        private GroupBox groupBox1;
        private CefSharp.WinForms.ChromiumWebBrowser chromiumWebBrowser1;
        private Button button1;
        private Label label1;
        private Button button2;
        private ComboBox comboBox1;
    }
}

IssueRepo.csproj

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
    <ApplicationManifest>app.manifest</ApplicationManifest>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="CefSharp.OffScreen.NETCore" Version="101.0.180" />
    <PackageReference Include="CefSharp.WinForms.NETCore" Version="101.0.180" />
  </ItemGroup>

</Project>

Program.cs

namespace IssueRepo
{
    internal static class Program
    {
        /// <summary>
        ///  The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main()
        {
            // To customize application configuration such as set high DPI settings or default font,
            // see https://aka.ms/applicationconfiguration.
            ApplicationConfiguration.Initialize();
            Application.Run(new Form1());
        }
    }
}

[amaitland]

The idea is you create a repo on github and push your changes there, so I can then download and build the project, submit a PR if required to propose changes. Not just dump the source code here as text.

The one comment I'll make is that the OffScreen implementation doesn't use the OS DPI scale, it will be 1 unless otherwise specified.

[scegg]

The problem is when I try to print the whole into a one-page-pdf file, setting the width and height using these numbers *264.38, using the numbers from OffScreen are right but those from UI are not.

[amaitland]

I'd suggest calling GetLayoutMetricsAsync and seeing what scale etc DevTools protocol returns.

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-getLayoutMetrics

[scegg]

By changing to use OffScreen one instead, I've skipped this problem. I've found and report the problem to the maintainer. Now I need to move on to other issues of mine. Sorry, I have no time for this issue currently and I guess this is really not your problem but Cef's.

[amaitland]

I've found and report the problem to the maintainer.

If you have created an issue then please post a link here for reference.

[scegg]

Problem: Same page's height values are different in UI-based version and OffScreen version. JS reported height from OffScreen version is the same as from Chrome but not equal to the one from UI-based. When calling printtopdf, no matter from UI-based or OffScreen one, it rendered as OffScreen one -- When set the width and height using OffScreen's value, it will generate one page.
My solution: Use OffScreen instead of UI-based one. For previewing, get screenshot from OffScreen and post to form.
Maintainer: You are the maintainer of CefSharp so the link is this page. These values and behaviors are related to CefSharp but as you said this problem may be generated by Cef. So leave it.

[amaitland]

Maintainer: You are the maintainer of CefSharp so the link is this page.

If you wish to have the problem fixed then you will need to isolate the problem in CEF and raise a problem in the CEF or Chromium issue trackers depending where the problem is. Most likely CEF.

[scegg]

We can close this discuss due to nothing wrong with CefSharp is observed.