MicrosoftEdge / MicrosoftEdge/WebView2Feedback

[Problem/Bug]: In WebView2-hosted page, JavaScript window's initial size is wildly wrong

Open
#5,467 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

What happened?

My WinForms app can manage multiple windows with WebView2 controls navigated to pages from the same web application. Sometimes the JavaScript code running in these pages has UI-adjustment code that depends on the size and position of the window. But if that code runs very early in the page lifecycle, the window object's outerWidth and outerHeight properties return drastically different values compared to the real size of the C# form hosting the browser control or of the control itself. If that logic runs after an asynchronous delay, then the values it sees are accurate (at least in that they match the size of the control, although an outer property should arguably match the form's size, as reported in #4821).

For example, if the startup code looks like this:

alert(`Window bounds: ${window.outerWidth} x ${window.outerHeight} @ (${window.screenLeft}, ${window.screenTop})`);
setTimeout(
    ()=>alert(`Window bounds: ${window.outerWidth} x ${window.outerHeight} @ (${window.screenLeft}, ${window.screenTop})`),
    0);

Then the two subsequent alert dialogs will report sizes two sizes that differ significantly. C# code inspecting the window's Form's position before running that script agrees with the latter alert (except that it is off by the margin reported in #4821).

(The sample code above also demonstrates #5003.)

I have a workaround I can use for this issue, but it's pretty ugly, and reorganizing the web app's logic to avoid reading the position too early would be a big undertaking.

Importance

Moderate. My app's user experience is affected, but still usable.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

143.0.3650.80

SDK Version

1.0.3650.58

Framework

Winforms

Operating System

Windows 11

OS Version

26100.7171

Repro steps

(The upload feature isn't working right now; I'll try to get my demo uploaded later.)

  1. Run the demo app in that folder.
  2. Click the Launch Second Window button to launch a window in which the script code will run.
  3. Observe the size/position values reported in alert dialogs in the new window.The first alert should disagree significantly with the real size. The second alert will report a position that is more or less in agreement with the window's real size.
Repros in Edge Browser

No, issue does not reproduce in the corresponding Edge version

Regression

Don't know

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.

Research direction

Start by running the demo app described in the repro steps and compare the first alert with the delayed alert and the hosting Form/control bounds. The issue's inline JavaScript and runtime details provide the initial case to investigate, but the demo upload is unavailable. Done requires a reproducible explanation of the early incorrect values and a verified correction or documented limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, javascript
Domain
desktop, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.