Unable to Interact with WebView in WinUI 2.6

[insomniachi]

Describe the bug Unable to interact with Contents of WebView. (Clicking Links, Scrolling etc.) This does not exist when downgrading to 2.5.0

Steps to reproduce the bug This from XAML Controls Gallery <WebView Source="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/web-view" /> you won't be able to scroll/click any of the links Can observe this behavior in the XAML Controls Gallery App itself.

Expected behavior Can Interact with WebView like 2.5.0

Version Info NuGet package version: [Microsoft.UI.Xaml 2.6.0]

Windows app type:	UWP	Win32
Yes

Windows 10 version	Saw the problem?
19043	Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[TusharRaj13]

Same issue here after upgrading to WinUI2.6. Can't interact with the webpage with the mouse... Using Tab to focus on Webview and then PAGEUP & PAGEDOWN key to scroll. And again clicking on webview, it loses focus as if there's some transparent control above webview.

[StephenLPeters]

@ranjeshj and @codendone FYI

[asklar]

Currently blocking upgrade of React Native for Windows to 2.6 - can we get this tagged as RNW too?

[larcai]

we have the same issue here, but when I open it inside a new AppWindow it seems to work

[michael-hawker]

@RosarioPulella did you notice issues with the XAML Editor WebView when you updated our Sample App?

[Rosuavio]

In https://github.com/windows-toolkit/WindowsCommunityToolkit/pull/4092#issuecomment-872620417 @XAML-Knight mentions that the editor does not respond to mouse or keyboard input. Also locally I can see the rendered xaml in the editor but I can't seem to interact with it.

[michael-hawker]

@ranjeshj @codendone I can confirm the XAML Controls Gallery app exhibits this behavior as well. I can tab into the WebView with the keyboard and interact with the page (scroll, navigate links, etc...), but all mouse input is ignored.

XCG app version is 1.2.19.0; OS is 19043.1052

This is a blocker for the Windows Community Toolkit as it effects our Sample App experience. It will also prevent XAML Studio from updating to WinUI 2.6 as well.

[winston-de]

I'm on Windows build 22000.51, and the WebView can be interacted with normally (XCG v 1.2.19.0 and a few other apps I tested with).

https://user-images.githubusercontent.com/59544401/124644245-e706ed80-de46-11eb-8c8a-47ba7b1538a3.mp4

[Rosuavio]

I am on 19043.1081, XCG 1.2.19.0 and I cannot interact with the WebView

[huynhsontung]

I cannot replicate this issue in an empty project yet I encounter the same problem with XCG 1.2.19.0. I'm on build 19042.1052.

https://user-images.githubusercontent.com/31434093/124655053-2ee04180-de54-11eb-9d10-818a81f6db25.mp4

[michael-hawker]

@huynhsontung interesting, I just created a new project as well (min 17763, target 19041) on my 19043.1052 windows version and it worked fine. Just added the WinUI 2.6 NuGet and resources, and just added a WebView within the Grid of the MainPage...

If I instead put the WebView in a new page, and add a NavigationView to my main page with a Frame:

    <muxc:NavigationView x:Name="nvSample" SelectionChanged="nvSample_SelectionChanged">
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem Content="Menu Item1" Icon="Play" Tag="SamplePage1" />
            <muxc:NavigationViewItem Content="Menu Item2" Icon="Save" Tag="SamplePage2" />
        </muxc:NavigationView.MenuItems>
        <Frame x:Name="contentFrame" />
    </muxc:NavigationView>

        private void nvSample_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
        {
            if (args.SelectedItemContainer.Tag.ToString() == "SamplePage2")
            {
                contentFrame.Navigate(typeof(WebPage));
            }
        }

And then re-run the app, I can click on the 2nd item, and enter the invalid state where the WebView won't respond to mouse input.

(If I instead just have the Frame be part of my main page and navigate to the secondary page it works fine. So it seems definitely related to having a NavigationView in the tree which is interrupting how WebView works on at least 19042/19043 OSes.)

Edit: Also, if I use the same project and just install WinUI 2.6.0-prerelease.210113001 it works fine as well.

WinUI Version	WebView Functional?
2.6.0-prerelease.210113001	Works
2.6.0-prerelease.210430001	Works
2.6.0-prerelease.210623001	Doesn't Work
2.6.0	Doesn't Work

So something with the new style introduction between 210430001 and 210623001 broke how WebView works within NavigationView.

[ranjeshj]

Looks like the rounding of the navigation view content area is causing this issue in certain OS versions.

As a workaround, setting NavigationViewContentGridCornerRadius to 0 might mitigate this issue. https://docs.microsoft.com/en-us/windows/apps/design/style/mica#standard-pattern-in-top-navigationview

[tipa]

I would highly appreciate if this could be fixed soon. Same bug occurs when adding a WebView into a ContentDialog.

[mmthomas]

Is there any update on this issue on Windows 10? Using InkCanvas in several places, including the main posture of the app. Is there another workaround than removing round corners in ContentDialogs and main root containers of InkCanvas elements?

[krschau]

The bug is seen while using the original WebView control, not WebView2? We don't plan on making further updates to the old WebView control, so I suggest trying it out with WebView2 instead. Please let me know if you see the same issue there.

[michael-hawker]

@krschau this is for the original WebView control and was an issue caused by the rounding of some corners with things like NavigationView content done in the WinUI 2.6 styles, see @ranjeshj's comment above here: https://github.com/microsoft/microsoft-ui-xaml/issues/5299#issuecomment-875798060

[krschau]

@michael-hawker From @ranjeshj's comment, I couldn't tell if we knew that this wouldn't occur in WebView2 as well. If it's limited to version 2.6 or WebView1, I'll close it, I just didn't want to do that without giving someone the opportunity tell me that's not the case.

[michael-hawker]

@krschau this is still an issue and not just related to WebView1 see #5855, #6021, and #6427. I don't think it should be closed and I don't think it's resolved. Please sync with @StephenLPeters and @ranjeshj on this.

I don't know if it also impacts WebView2 or not. My general understanding is that it's an issue in the OS that is the root cause with how rounded corners impact input events in these scenarios.

[asklar]

There are also devices that don't have WebView2 today (like some Hub versions) so their only option is WebView1, not fixing this means those devices have no web view control available.

[pubtom]

When will you fix this issue? WinUI 2.8 still has this issue! This is a blocking issue: WinUI2 is unusable since the 2.6 version if your app uses a WebView control. I forced to use the WinUI 2.5 version because of this issue. Highly waiting for the fix!

[jasonxz]

I'm having the same problem with WebView2 which, obviously, can't be used concurrently with WinUI 2.5.

[michael-hawker]

If anyone's confused about how to apply the workaround that has been called out here, you can see how we applied this in the Toolkit app here: https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/8ecc496d02dd778088e6527f0236e619204cc35d/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml#L31-L39

[wherewhere]

I found how to fix it! You can't set BorderBush and CornerRadius in same time, or the WebView will can't be clicked. You can just remove the BorderBush, then you can use WebView with CornerRadius now. Like this https://github.com/Coolapk-UWP/Coolapk-UWP/blob/revived/CoolapkUWP/CoolapkUWP/Controls/NavigationView/NavigationView.xaml#L20-L709

<SplitView.Content>
    <Border
        x:Name="ContentBorder"
        Margin="{ThemeResource NavigationViewContentMargin}"
        CornerRadius="{ThemeResource NavigationViewContentGridCornerRadius}">
        <Grid
            x:Name="ContentGrid"
            Background="{ThemeResource NavigationViewContentBackground}"
            BorderBrush="{ThemeResource NavigationViewContentGridBorderBrush}"
            BorderThickness="{ThemeResource NavigationViewContentGridBorderThickness}">
...

[TheWebartist]

Hi,

I am also facing the same issue when I upgrade from 2.5 version to 2.8.2.

I can interact with WebView2 but not with WebView.

And the previous workarounds on SplitView root element in NavigationView or with Resources override doesn't works.

My app is also published on Xbox so I cannot replace all of WebView by WebView2...

Have-you some news ?

I can reproduce this issue on Windows 11

[DmitriyKomin]

Just wanted to add context for closure - this is in the original WebView control, and unfortunately we are unable to investigate most WinUI2-only issues due to the current focus on WinUI3 (more on the policy here).

[Marim99]

In CommunityToolkit/WindowsCommunityToolkit#4092 (comment) @XAML-Knight mentions that the editor does not respond to mouse or keyboard input. Also locally I can see the rendered xaml in the editor but I can't seem to interact with it.

could you tell me how can i set the NavigationViewContentGridCornerRadius

[TusharRaj13]

@Marim99 You can set the corner radius in the page resource where your NavigationView is present.

<Page.Resources>
    <CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>
</Page.Resources>

This should fix the issue.