[Regression] LinearGradientBrush broken on Android in 10.0.60

[plequere-ms]

Description

Here is a simple example of an image with an overlay:

            <Border Stroke="Transparent" Margin="5,0,0,0" WidthRequest="250">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="10"/>
                </Border.StrokeShape>
                <Grid>
                    <Image Source="dotnet_bot.png" Aspect="AspectFill" />
                    <VerticalStackLayout VerticalOptions="End" Padding="10">
                        <VerticalStackLayout.Background>
                            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                                <GradientStop Color="Black" Offset="0.0" />
                                <GradientStop Color="#80000000" Offset="0.5" />
                                <GradientStop Color="Transparent" Offset="1.0" />
                            </LinearGradientBrush>
                        </VerticalStackLayout.Background>
                        <Label Text="Title" Style="{StaticResource MediumBoldTextStyle}" TextColor="White"  />
                        <Label Text="Subtitle" Style="{StaticResource TinyTextStyle}" TextColor="White" />
                    </VerticalStackLayout>
                </Grid>
            </Border>

On Android, starting with version 10.0.60, the overlay renders as an opaque black box:

On iOS (and on Android in previous versions of MAUI), it renders as expected:

Steps to Reproduce

1. Create a MAUI app.
2. Add the following XAML markup:

            <Border Stroke="Transparent" Margin="5,0,0,0" WidthRequest="250">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="10"/>
                </Border.StrokeShape>
                <Grid>
                    <Image Source="dotnet_bot.png" Aspect="AspectFill" />
                    <VerticalStackLayout VerticalOptions="End" Padding="10">
                        <VerticalStackLayout.Background>
                            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                                <GradientStop Color="Black" Offset="0.0" />
                                <GradientStop Color="#80000000" Offset="0.5" />
                                <GradientStop Color="Transparent" Offset="1.0" />
                            </LinearGradientBrush>
                        </VerticalStackLayout.Background>
                        <Label Text="Title" Style="{StaticResource MediumBoldTextStyle}" TextColor="White"  />
                        <Label Text="Subtitle" Style="{StaticResource TinyTextStyle}" TextColor="White" />
                    </VerticalStackLayout>
                </Grid>
            </Border>

3. On Android, the overlay appears as a black box. Expected: a semi-transparent overlay with a gradient.

Link to public reproduction project repository

https://github.com/plequere-ms/maui-10-0-60-bug-repro

Version with bug

10.0.60

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

10.0.50

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No

Relevant log output

[MAUIoxo]

That's a bad one and no tests in place to prevent this beforehand??

I use these gradients in different places, all are broken. One of them for instance is as follows. It even doesn't show my background image anymore. It's black to grey obove my background image and you even can't see it:

<!-- Image at the bottom --> 
<Image ZIndex="1" Source="help_page_background.jpg" Aspect="AspectFill" VerticalOptions="Fill"/>

<Grid ZIndex="2">
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="White" Offset="0.0" />
            <GradientStop Color="Transparent" Offset="1.0" />
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

10.0.51:

10.0.60:

at a different place I use it in a code-behind file like this. Also broken:

return new Border
{
    Background = new LinearGradientBrush
    {
        StartPoint = new Point(0, 0.0),
        EndPoint = new Point(1, 0.0),
        GradientStops = new GradientStopCollection
        {
            new GradientStop { Color = Colors.Transparent, Offset = 0.0f },
            new GradientStop { Color = RippleColor.MultiplyAlpha(0.5f), Offset = 0.1f },
            new GradientStop { Color = RippleColor.MultiplyAlpha(0.5f), Offset = 0.9f },
            new GradientStop { Color = Colors.Transparent, Offset = 1.0f }
        }
    },
    StrokeShape = new Microsoft.Maui.Controls.Shapes.RoundRectangle { CornerRadius = 0 },
    Stroke = Colors.Transparent,
    Opacity = 0.0,
    WidthRequest = grid.Width,
    HeightRequest = grid.Height,
    HorizontalOptions = LayoutOptions.Fill,
    VerticalOptions = LayoutOptions.Fill
};

Can't use 10.0.60 because auf this and had to go back to 10.0.51

[bcaceiro]

Facing the same issue! the gradients just "disappeared"

[NafeelaNazhir]

his issue has been validated in Visual Studio Code 1.118.0 with .NET MAUI versions 10.0.60 and 10.0.51. It is reproducible on the Android platform in version 10.0.60 and not reproducible on versions below 10.0.60.

[MAUIoxo]

@NafeelaNazhir It not only affects Android. My comment was based on iOS and I can see it there as well. Needs to be fixed for both platforms. I can’t test on other platforms though, but maybe also there.

[MAUIoxo]

@plequere-ms could you also please add iOS to the affected platforms in your original issue description so it does not get forgotten?