SystemBackdrop impacts WebView2 behavior

[Natriss]

Describe the bug

When putting a WebView2 Element in a Border with a CornerRadius. The Border will cut off the corners of the WebView2 Element. When applying a SystemBackdrop to the Window the WebView2 ignores the Border its CornerRadius.

Steps to reproduce the bug

1. Create a WinUI3 app
2. Insert a Border and in the Border a WebView2
3. Give the Border a CornerRadius and run the app.
4. Give the app a SystemBackdrop (Mica or Acrylic) and run the app

Expected behavior

The WebView2 Element shouldn't come out of the Border and ignores the CornerRadius of the Border.

Screenshots

Without a SystemBackdrop

With a SystemBackdrop

NuGet package version

WinUI 3 - Windows App SDK 1.5.1: 1.5.240311000

Windows version

Windows 11 (22H2): Build 22621

Additional context

MainWindow

<Window x:Class="App7.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App7" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Grid x:Name="rootContent">
    <Grid.RowDefinitions>
        <RowDefinition Height="32" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Border x:Name="appTitleBar" Grid.Row="0">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Demo" VerticalAlignment="Center" Margin="16,8" />
            <TextBlock x:Name="SubTitle" Text="Preview" Foreground="{ThemeResource AccentFillColorSelectedTextBackgroundBrush}" Opacity="0.5" VerticalAlignment="Center" Style="{StaticResource CaptionTextBlockStyle}" />
        </StackPanel>
    </Border>
    <Frame x:Name="rootFrame" Grid.Row="1" Margin="20" />
</Grid>

MainWindow Code-Behind

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        this.ExtendsContentIntoTitleBar = true;
        //This gives the issue with the WebView2
        this.SystemBackdrop = new DesktopAcrylicBackdrop();
        this.SetTitleBar(appTitleBar);
        this.rootFrame.Navigate(typeof(BlankPage1));
    }
}

BlankPage1

<Page x:Class="App7.Views.BlankPage1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App7.Views" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Border x:Name="Border1" CornerRadius="100">
    <WebView2 Source="https://microsoft.com"  />
</Border>

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• Border with corner radius, border thickness, background renders a gap between content and border (#9454), similarity score: 0.75
• [WASDK 1.3]CornerRadius on Window is 0 when IsResizable = false and SetBorderAndTitleBar() used (#8374), similarity score: 0.74

Closed similar issues:

• AcrylicInAppFillColorDefaultBrush does not work when above WebView2 (#8267), similarity score: 0.73
• WebView2 is redrawing to the entire window beyond the frame (#7837), similarity score: 0.73
• Graphical Artifacting With Border When Non-1 Scale, Non-Uniform Corner-Radius (#6475), similarity score: 0.72

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[HO-COOH]

Having the same issue. After adding SystemBackdrop the rounded corner is lost. A better solution would be just adding CornerRadius to WebView2 control itself.