Skip to content

Resizing WPF Window causes Blazor WebView2CompositionControl content to flicker and disappear #11291

@cdock1029

Description

@cdock1029

Description

I have raised this issue with the MAUI team since it is listed as the owning repository of the Microsoft.AspNetCore.Components.WebView.Wpf dependency, but they think it is more of a WPF issue

With Microsoft.AspNetCore.Components.WebView.Wpf version 10.0.10 and 10.0.11, resizing the window produces tons of flickering of the Webview content alternating between rendered and a blank content area, or even completely rendering blank until resizing is stopped.

This can result in, when the resizing is stopped, the entire content of the Webview being blank if user just happens to stop resizing at the right time. Even if the content is there when resizing is stopped, the overall experience looks terrible.

Version 9.0.120 does not have this problem.

10.0.10.mp4
9.0.120.mp4

Using plain non-Blazor Webview, in the form of WebView2CompositionControl, does not exhibit this behavior.

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

	<PropertyGroup>
		<OutputType>WinExe</OutputType>
		<TargetFramework>net10.0-windows10.0.19041.0</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
		<UseWPF>true</UseWPF>
		<RootNamespace>WebViewBug</RootNamespace>
	</PropertyGroup>

	<ItemGroup>
		<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.3595.46" />
	        <!-- <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.3179.45" /> -->
	</ItemGroup>

</Project>
<Window x:Class="WebViewBug.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        xmlns:local="clr-namespace:WebViewBug"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <!--<wv2:WebView2 Name="webView"
                      Source="https://www.microsoft.com" />-->

        <wv2:WebView2CompositionControl Source="https://www.microsoft.com" />
    </DockPanel>
</Window>
WebView2CompositionControl.mp4

Reproduction Steps

Reproducible with out of the box Blazor Hybrid WPF app.

https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf

<Window x:Class="WindowFlicker.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WindowFlicker"
        xmlns:blazor="http://schemas.microsoft.com/winfx/2006/xaml/presentation/blazor"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <blazor:BlazorWebView HostPage="wwwroot\index.html"
                              Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app"
                                      ComponentType="{x:Type local:Counter}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </DockPanel>
</Window>

Expected behavior

No flickering as it was before the switch to WebView2CompositionControl in .NET 10

Actual behavior

Flickering, rendering blank intermittently

Regression?

Yes. Worked with package Microsoft.AspNetCore.Components.WebView.Wpf version 9.0.120

Known Workarounds

Downgrade to 9.0.120

Impact

Unusable with newest versions.

Configuration

  • .NET 10
  • Windows 11
  • x64

Other information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions