Gradient not appearing on iOS

[Javierflo95]

Description

I implemented my own design on XAML using Android, with normal background and LinearGradientBrush, and when I tested on iOS I get this visual inconsistency

Steps to Reproduce

1. Create NET MAUI App
2. Replace MainPage to this XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls" ios:Page.UseSafeArea="True" Shell.NavBarIsVisible="False" x:Class="GenerationApp.MainPage">

<Grid RowDefinitions="Auto,3*,*,*">
    <Grid Margin="{OnPlatform Android='-20,-20,0,0', iOS='-40,-20,0,0'}">
        <Image Source="deporte" HeightRequest="{OnPlatform Android='600', iOS='600'}"/>
    </Grid>
    <Grid Grid.Row="1" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent"
          Margin="{OnPlatform Android='0,-180,0,-100', iOS='0,-80,0,-1'}">
        <Frame BorderColor="transparent">
            <Frame.Background>
                <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                    <GradientStop Offset=".5" Color="Transparent"/>
                    <GradientStop Offset=".1" Color="{StaticResource GenOrange}"/>
                    <GradientStop Offset=".1" Color="{StaticResource GenOrange}"/>
                    <GradientStop Offset=".1" Color="{StaticResource GenOrange}"/>
                    <GradientStop Offset=".1" Color="{StaticResource GenOrange}"/>
                    <GradientStop Offset=".1" Color="{StaticResource GenOrange}"/>
                </LinearGradientBrush>
            </Frame.Background>
        </Frame>
        <Grid HeightRequest="210" WidthRequest="210" HorizontalOptions="Center">
            <Image x:Name="logo_gen" Source="logo_generations_bluedark" HeightRequest="200"  
                   WidthRequest="200" HorizontalOptions="Center" VerticalOptions="Center"
                   Margin="0,-180,0,0"/>
        </Grid>
    </Grid>
    <StackLayout Grid.Row="3" Margin="0,-200,0,10" VerticalOptions="CenterAndExpand"
                 HorizontalOptions="FillAndExpand" Spacing="10">
        <Label Text="Lorem Ipsum dolor" TextColor="White" HorizontalOptions="CenterAndExpand" />
        <Label Text="consectetuer adlplsicing ellit." TextColor="White" HorizontalOptions="CenterAndExpand" />
        <Border StrokeThickness="2" StrokeShape="Rectangle" Margin="30,0,30,0" BackgroundColor="{StaticResource GenDark}" >
            <Button Text="SIGN UP NOW" TextColor="White" BorderWidth="0" HorizontalOptions="FillAndExpand" 
                    BackgroundColor="Transparent" BorderColor="Transparent" Command="{Binding GoToRegisterPage}"/>
        </Border>
    </StackLayout>
    <StackLayout Grid.Row="4" VerticalOptions="FillAndExpand">
        <FlexLayout Direction="Column">
            <BoxView HorizontalOptions="FillAndExpand" HeightRequest=".1" Color="White"/>
        </FlexLayout>
        <Button Text="LOGIN" TextColor="White" BackgroundColor="Transparent" BorderColor="Transparent" 
                BorderWidth="0" Command="{Binding GoToLoginPage}"/>
    </StackLayout>
</Grid>

3. Run App

Version with bug

6.0.400 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

Android 12, iOS 15

Did you find any workaround?

No response

Relevant log output

No response

[Ahmadmansoor]

This is normal, I think u have to make a check for the system ( Andriod or iOS) depending on this u have to design a separate theme for each system and then load this Theme according to that system. this is the fast idea I try to fix this issue.

[NonameMissingNo]

@Ahmadmansoor The problem here is that the gradient isn't shown on iOS

[NonameMissingNo]

@Javierflo95 There is a problem with GradientBrushes on iOS and MacOS if used within a Frame.Background

[Ahmadmansoor]

Yes I know that, that why I told him to make difference theme , and load it according to the system, iOS is annoying system and most of time u can't get the design u dream , except one thing it has a nice true color 😀

[NonameMissingNo]

Yes, but the purpose of Maui would be to make those annoying quirks of iOS disappear, and have 1 unified system where everything looks how it should

[Ahmadmansoor]

Sorry but as always nothing perfect , this is the life 😉

[NonameMissingNo]

Huh, if I put the app in the background, and then come back, the gradient appears... (main branch)

[Javierflo95]

@NonameMissingNo , what do you mean, with if you put the app in background...

[NonameMissingNo]

@rachelkang Are you sure that the iOS issue requires an android tag?

[jsuarezruiz]

The problem is the Frame not rendering the gradient on iOS. The issue should be fixed by https://github.com/dotnet/maui/pull/7925

[Javierflo95]

The problem is the Frame not rendering the gradient on iOS. The issue should be fixed by https://github.com/dotnet/maui/pull/7925

Thanks @jsuarezruiz

[Javierflo95]

@jsuarezruiz

another difference that I see is with the textbox (editors) see bellow

And when I use my app and go to login page, and then click on LOG IN in Android work well in API 31 but when I click on thiis iOS or Android API 28 the button doesn't work well :(

Any suggestions?

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[jsuarezruiz]

he button doesn't work well

Could you describe with more details the problem?, cannot click the button?

[hermben]

As a workaround, you can replace Frame with ContentView to see if it also works for you: Example code:

<ContentView
                HeightRequest="120"
                HorizontalOptions="FillAndExpand"
                Margin="-2"
                Padding="20, 45, 20, 0">
            <ContentView.Background>
                <LinearGradientBrush>
                    <GradientStop Color="#00A7B5" Offset="0.1" />
                    <GradientStop Color="#721474" Offset="1.0" />
                </LinearGradientBrush>
            </ContentView.Background>
</ContentView>

If you need border, border radius and shadow, you can combine ContentView with Border and Shadow MAUI elements.

[Javierflo95]

Could you describe with more details the problem?, cannot click the button?

@jsuarezruiz The Button appear well, but when you click on it, the button on iOS it does not anything