WebView2 fails to load in Office Add-ins, with different monitor scaling settings

[tiagoabreu]

Description
An Office Add-in with WebView2 rendering in a custom task pane stops working on displays with different scaling than the main display.

Added solution where problem can be replicated:
WordWebView2AddIn.zip

Version
SDK: 1.0.664.37
Runtime: WebView2 Runtime 87.0.664.75
Framework: WinForms
OS: Win10 1909, Word 2101 (Build 13628.20118)

Repro Steps

1. Download solution provided in the bug
2. Assuming you have at least two displays, go to Display Settings and change the scale of items on one of your displays so that it differs from your main display (e.g. set the main display to 100%, secondary display to 125%)
3. Make sure the Start-up screen in Word is disabled
4. Start Word from the add-in solution in the secondary display
5. Check if page is rendered and word is not frozen

Screenshots
Expected and what is displayed when opening Word on main screen:

Displayed when opening on a secondary screen (the application is frozen in this case) and also when start-up is enabled

Additional context
Also replicable in the latest pre-release version.

When having the startup screen (also called backstage) enabled, the Webview2 control does not render at all, despite the navigation happening in the background. That was verified only through debugging.

AB#31424281

[ozhanatali]

Same issue here. I'm using shared runtime, Windows 10 and latest office 365 build. Webview2 is installed. I can see that excel webview pings the backend but not running the frame. The addin works while sideloading on excel online

EDIT: I just created a new project on visual studio c#. It's working well with edge instance before converting to shared runtime. But after the same result :(
And the same addin works well on office web (while sideloading).
without shared runtime office addins means nothing and should be updated as soon as possible.

[jozefizso]

We have the same issue with CefSharp and WebView2 when they are used in Office add-in.

[chucklay]

Seems like I am hitting the same issue as @ozhanatali - Shared runtime add-in loads without issue on any browser I try it in, but on desktop I get the same solid grey screen. OfficeAddins.log.txt also claims that the add-in loaded without issue.

[champnic]

@tiagoabreu Can you confirm that the only difference between the version that is working and not working is the different DPI on the second monitor? If the main monitor is a different DPI (125%) does it work? If the secondary monitor is 100% does it work? Your screenshots seems to show 2 different scenarios, so just trying to narrow the problem down a bit.

@Others - Could you please let me know what SDK version and runtime version you are using? Does the issue still repro if you use the latest prerelease package and Edge Canary for the runtime?

[tiagoabreu]

It works if both monitors are set to the same DPI. If there is a difference in DPIs (e.g. 125% on the main monitor, 100% on the secondary) AND you are running it on the secondary monitor, it does not work. If you are running on the primary monitor, it works in any case.

[jozefizso]

The content will not render correctly anytime there are two monitors with different DPI settings and user will move the window between monitors.

It will also break when user changes the DPI while the application with WebView2 is open.

One if the issues is Office applications does not send the DPI changed event to task pane instances. Also, the Chromium/Edge rendering process is set to fixed DPI level which may be incorrect when monitors have different DPI settings.

[mancristiana]

I could also reproduce this behavior issue with:

• SDK version 1.0.721-prerelease
• Microsoft Edge WebView2 Runtime 87.0.664.74

I could only reproduce this issue when I had different scaling settings on my displays (100% and 125%) and opened Office applications with WebView2 in a task pane on my secondary display. When I set both my monitor and laptop display to the same scaling (e.g. 125%) it worked as expected.

[champnic]

Great, thanks so much everyone for the added detail! I've added this bug to our backlog to take a closer look.

[tiagoabreu]

Hello @champnic ,

Can you provide feedback on this one? Currently we have no workaround around it and it renders Office with the add-in unusable in a multi-screen setup when using it on a secondary screen (with different DPI scale settings, as mentioned before).

[jozefizso]

We use WebView2 to display HTML content in a Task Pane in the MS PowerPoint.

When I open the PowerPoint and the Task Pane on a monitor with 125% DPI scaling and then I move the window to second monitor with 200% DPI scaling, the HTML content will pop out of its place in the Task Pane.

PS: In our implementation with CefSharp we had these same issues. We were able to fix them by setting DPI awareness for .NET threads each time our code was creating web view controls. These DPI awareness fixes does not work for WebView2.

[jozefizso]

Hi @champnic, this is the behavior of Edge WebView2 1.0.790-prerelease when running inside MS Office apps and the user drags the app from monitor with 150% scaling to monitor with 200% scaling.

The hit area is correct - as I move the mouse over the task pane, I can click buttons and HTML elements react to the mouse at the right position. The issue is with the content being rendered out of the web controls actual area.

Edge_WebView2.mp4

[jirifa]

The same thing is happening in our VSTO Outlook AddIn (C# WinForms).
When I move Outlook to a monitor with different DPI, the content from WebView2 is rendered outside of its bounds and even outside of the Outlook window.

We would also appreciate a workaround or Fix.

[g466a]

Same here: 3 Monitors: 100% 100% 125%, as soon as I move the window pass the 100% to 125% border one or two times the webview runs into positioning issues:

[jamesoli]

@tiagoabreu I was able to see the issue when the start screen stayed up and I've communicated with the office team who is taking a look. However, I wasn't able to see the issue of having a blank webview show up when I started the project you included on a secondary monitor with a different display scale.

Do you also see it navigate to the page you set similarly to the start page scenario? You can do this by adding a WebViewNavigationCompleted event and checking the WebView2.Source property. I'm just wondering if this is similar to the start screen issue or if it's something else.

[tiagoabreu]

@jamesoli We didn't know at the time, but those were in fact two issues. The issue related with the Office start-up screen is actually this one - #898
Either using the version where it is fixed or the workaround I provide there addresses it.

Regarding the main issue reported here, we came to find that the Windows version is important. Under version 1909 (not sure about earlier versions), opening a task pane with Office in the secondary monitor with different display scale, renders the whole Office application completely unusable.
At this moment the exact reproduction steps on 21H1 version of Windows render a working application.

As for the issue reported in all comments here, that happens everywhere as far as I found out, but might be a different problem.

[jamesoli]

@tiagoabreu Just to clarify, is "the issue reported in all comments here" different than the "main issue reported here" that you mention? I take the main issue to be the one where if you open the office app on a secondary monitor with a different scale, the webview won't render. The only other issue is where the add-in pane pops out of the office app.

[tiagoabreu]

Yes, you are correct. The issue where the webview does not render on the secondary monitor is only reproducible on versions of Windows 1909 or older.
The issue with the add-in pane popping out is reproducible everywhere.

[siseli]

Any progress on this (WebView2 rendering outside of pane)?
We would really appreciate if this got fixed soon.

Or is there some work-around to force WebView2 to re-render at the right place?

[jozefizso]

@champnic what is update on this issue? This is a blocker for us.

[champnic]

@jozefizso Which of these issues is blocking you? What version of Office and Windows are you seeing this on?

Both issues (not displaying, and popping out while dragging) were external to us. The "not displaying" issue is related to DWM/Windows windowing, and I don't believe we have a repro on newer versions of Windows (post-19H1).

The "popping out while dragging" is a bug on Office that they are still investigating.

Thanks!

[jozefizso]

Hi @champnic, the issue exists on any Windows 7 SP1, Windows 8.1 and Windows 10 releases and any MS Office 2013, 2016 and 365.

This issue (popping out when DPI's mismatch) exists in the CefSharp Chromium and it is fixable by using the --disable-gpu-compositing switch. This workaround does not work for WebView2.

The issue is still present with SDK 1.0.1020.30 and Runtime 95.0.1020.53

[konstanto]

Hi @champnic. Do you have links to the issues in the other projects (Office and Windows)? Would be great to be able to follow along since we still have many customers complaining about it.

[champnic]

Unfortunately we only have internal tracking items. We are keeping this issue open until it's been resolved by Office. Thanks!

[HEBOS]

Same here. It seems that the issue appears when having resolution greater than 1920x1080 with scaling greater than 100%.

[jozefizso]

@champnic what are the updates on this issue? The scaling still does not work correctly with latest MS Office 365 build and WebView2 SDK.

[champnic]

Hey @jozefizso - Unfortunately the OS team has decided not to service a fix for this issue to downlevel devices (< Win 11).

[siseli]

Why the OS team? I think this is rather a WebView2 issue.
Cefsharp for example is able to deal with it correctly.

[jozefizso]

Hey @jozefizso - Unfortunately the OS team has decided not to service a fix for this issue to downlevel devices (< Win 11).

So this bug is resolved in Windows 11?

So how are we supposed to make a product using WebView2 with such bugs?

[HEBOS]

I managed to get it working on all OS by changing from:

Application.SetHighDpiMode(HighDpiMode.DpiUnawareGdiScaled);

to

Application.SetHighDpiMode(HighDpiMode.DpiUnaware);

[siseli]

In our case of an office task pane I could finally solve the "pop out" problem by switching the office display settings (File > Options) to "Optimize for compatibility".
The problem seems to have to do with Office not sending dpi_change messages to task pane child windows.
See https://docs.microsoft.com/en-us/office/client-developer/ddpi/handle-high-dpi-and-dpi-scaling-in-your-office-solution for details.
It's not an optimal solution as customers need to manually change their office settings, but for now it works for us.

[ManojPatelA]

Is this issue resolved with any particular office version ? I have outlook VSTO plugin with webview2 control and with that somehow I am unable to reproduce. My office version is 2108 and have default "Optimize for best appearance" selected.

[ManojPatelA]

Is there any further update on this issue ? Seems issue is still reproducible with outlook plugin. Is there any code level workaround for this ?

[ManojPatelA]

@siseli office display setting "Optimize for compatibility" you have mentioned in your comment is solving the problem completely ? Is it consistent for all ? Is your plugin for outlook or any other office app ? For my case it's very inconsistent behavior, frequency is very less and happens when work from office and then login again back from the laptop screen, that also not consistent. Thanks!

[ManojPatelA]

Hi @champnic Apart from HTML content grey out / popping out, we have started seeing freezing of the outlook inspector window completely while launching CTP form since last two weeks. This is very random and not able to consistently reproduce but happening with different resolution screen.
Webview SDK version is 114.0.1823.79
Any idea if this is another symptom for this known issue and is it recommended to setHighDPIMode or display setting "Optimize for compatibility"?

[ManojPatelA]

HEBOS

@HEBOS Application.SetHighDpiMode, do you have office VSTO add in ? And is this solution works for custom task pane or you have child windows form from office application ? Thanks!

[leonall]

Any progress on this problem？