[iOS] Border with image is wrong rendering.

[ghost]

Description

The border with the image is wrong rendering on the iOS platform.

Steps to Reproduce

Please look at the video.

Screen.Recording.2024-02-06.at.09.44.36.mov

Additional attached XAML code

<?xml version="1.0" encoding="utf-8"?>

<pages:BasePopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:MyStandards.Pages"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:myQuiz="clr-namespace:MyStandards.ViewModels.MyQuiz"
             xmlns:languages="clr-namespace:MyStandards.Resources.Languages"
             xmlns:controls="clr-namespace:MyStandards.Controls"
             x:Class="MyStandards.Pages.Tabs.MyQuiz.ChallengeInvitationPopupPage"
             x:DataType="myQuiz:ChallengeInvitationViewModel">
    <pages:BasePopupPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="Appearing" Command="{Binding AppearingCommand}" />
    </pages:BasePopupPage.Behaviors>
    <pages:BasePopupPage.Resources>
        <ResourceDictionary>
            <Style x:Key="MainContainerStyle" TargetType="Border">
                <Setter Property="Margin" Value="32,0"/>
                <Setter Property="VerticalOptions" Value="Center"/>
                <Setter Property="HorizontalOptions" Value="Fill"/>
                <Setter Property="StrokeShape" Value="RoundRectangle 20"/>
            </Style>
            <Style x:Key="BackgroundImageStyle" TargetType="Image">
                <Setter Property="Source" Value="popup_bg" />
                <Setter Property="Aspect" Value="AspectFill" />
            </Style>
            <Style x:Key="BaseLabelStyle" TargetType="Label">
                <Setter Property="VerticalOptions" Value="Center" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="Margin" Value="0,10" />
                <Setter Property="FontFamily" Value="Oswald" />
                <Setter Property="TextColor" Value="{StaticResource White}" />
            </Style>
            <Style x:Key="ChallengeMailBoxImageStyle" TargetType="Image">
                <Setter Property="Aspect" Value="AspectFit"/>
                <Setter Property="Source" Value="challenge_invite_mailbox" />
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="VerticalOptions" Value="Center"/>
            </Style>
            <Style x:Key="UserContainerStyle" TargetType="Border">
                <Setter Property="StrokeShape" Value="RoundRectangle 16"/>
                <Setter Property="Stroke" Value="#66c0ff"/>
                <Setter Property="StrokeThickness" Value="2"/>
                <Setter Property="BackgroundColor" Value="#004a82"/>
                <Setter Property="Padding" Value="12"/>
            </Style>
            <Style x:Key="UserProfileLabel" TargetType="Label">
                <Setter Property="LineBreakMode" Value="TailTruncation" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="TextColor" Value="{StaticResource White}" />
            </Style>
            <Style x:Key="ButtonStyle" TargetType="controls:CustomButton">
                <Setter Property="HeightRequest" Value="45" />
                <Setter Property="WidthRequest" Value="180"/>
                <Setter Property="StrokeShape" Value="RoundRectangle 21" />
            </Style>
            <Style x:Key="AcceptButtonStyle" TargetType="controls:CustomButton" BasedOn="{StaticResource ButtonStyle}">
                <Setter Property="BackgroundColor" Value="Green" />
            </Style>
            <Style x:Key="RefuseButtonStyle" TargetType="controls:CustomButton" BasedOn="{StaticResource ButtonStyle}">
                <Setter Property="BackgroundColor" Value="Red" />
            </Style>
            <Style x:Key="AvatarBackgroundImageStyle" TargetType="Image">
                <Setter Property="Source" Value="avatar_background_green" />
                <Setter Property="WidthRequest" Value="64"/>
                <Setter Property="HeightRequest" Value="64"/>
            </Style>
            <Style x:Key="AvatarImageStyle" TargetType="Image">
                <Setter Property="WidthRequest" Value="64"/>
                <Setter Property="HeightRequest" Value="64"/>
            </Style>
        </ResourceDictionary>
    </pages:BasePopupPage.Resources>
    <pages:BasePopupPage.Content>
        <Border
            Style="{StaticResource MainContainerStyle}">
            <Border.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding ClosePopupCommand}" />
            </Border.GestureRecognizers>
            <Grid>
                    <Image 
                         x:Name="BackgroundImage"
                         Style="{StaticResource BackgroundImageStyle}"/>
                    <VerticalStackLayout Padding="24"
                                         Spacing="10"
                                         HorizontalOptions="Fill" 
                                         VerticalOptions="Center"
                                         x:Name="MainContainer">
                        <Image 
                            Style="{StaticResource ChallengeMailBoxImageStyle}"/>
                        <Label 
                            Text="{x:Static languages:AppResources.ChallengeInvitation}"
                            Style="{ StaticResource BaseLabelStyle}" />
                        <Border 
                            Style="{StaticResource UserContainerStyle}">
                           <Grid ColumnDefinitions="Auto, *"
                                          ColumnSpacing="24">
                                        <Grid Grid.RowSpan="2">
                                            <Image 
                                                Style="{StaticResource AvatarBackgroundImageStyle}"/>
                                            <Image 
                                                Style="{StaticResource AvatarImageStyle}"
                                                Source="{Binding QuizUser.AvatarUrl}"/>
                                        </Grid>
                                        <VerticalStackLayout Grid.Column="1"
                                                             VerticalOptions="Center"
                                                             Spacing="8">
                                            <Label Text="{Binding QuizUser.Nickname}"
                                                   Style="{StaticResource UserProfileLabel}"
                                                   FontFamily="OswaldBold"/>
                                            <Label Style="{StaticResource UserProfileLabel}"
                                                   LineBreakMode="WordWrap">
                                                <Label.FormattedText>
                                                    <FormattedString>
                                                        <Span Text="{Binding Source={x:Static languages:AppResources.GlobalPosition}, StringFormat='{0}:'}"
                                                              FontFamily="Oswald"/>
                                                        <Span Text="{Binding QuizUser.Position, StringFormat=' {0} '}"
                                                              FontFamily="OswaldBold"/>
                                                        <Span Text="{Binding QuizUser.Points, StringFormat=' ({0}'}"
                                                              FontFamily="Oswald"/>
                                                        <Span Text="{Binding Source={x:Static languages:AppResources.Points}, StringFormat=' {0})'}"
                                                              FontFamily="Oswald"/>
                                                    </FormattedString>
                                                </Label.FormattedText>
                                            </Label>
                                        </VerticalStackLayout>
                                        </Grid>
                        </Border>
                        <controls:CustomButton
                            Style="{StaticResource AcceptButtonStyle}"
                            Text="{x:Static languages:AppResources.ChallengeInitiate}"
                            Command="{Binding InviteCommand}"/>
                        <controls:CustomButton
                            Style="{StaticResource RefuseButtonStyle}"
                            Text="{x:Static languages:AppResources.ChallengeCancel}"
                            Command="{Binding CancelCommand}"/>
                    </VerticalStackLayout>
                </Grid>
        </Border>
    </pages:BasePopupPage.Content>
</pages:BasePopupPage>

Link to public reproduction project repository

No response

Version with bug

8.0.6

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[drasticactions]

Could you please create a sample showing this occurring in an application? Looking at the image and your XAML, I think what you want is for the background image to fill the entire background and not have the blue background from the border show, but since it's an aspect fill that could be correct behavior based on whatever image you have.

Also, having a simple reproduction sample would help create a test case to then fix the issue with and add to the MAUI test suite, should it be a bug.

[ghost]

Hi @angrynerds-krzysztof. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

@drasticactions I attached the video with the issue. Actually, I meant weird behavior in three second of this video.

[drasticactions]

@drasticactions I attached the video with the issue. Actually, I meant weird behavior in three second of this video.

Thank you for specifying! I didn't notice that.

We still need a sample though, since it's not just Border, but you're creating a popup. There's more that could be at issue than just the image.

[ghost]

Hi @angrynerds-krzysztof. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[borrmann]

I see the same behaviour in my app.
Borders often appear in a different shape before they render in their correct shape on iOS. Doesn't only happen in popup pages but anywhere.

[borrmann]

trim.6E616082-5E66-467F-B378-9B6F5A052449.MOV

The Circle around the icon is a Border. It kind of moves into its correct shape.

[borrmann]

trim.088F11D6-1BF7-4CDA-9457-EEEECFC63772.MOV

In this video, the gray border, which wraps the icon, does not render correctly and doesn't even get into its shape.
Previously IsVisible of the surrounding grid changed from True, to False to True

[ghost]

Hi @angrynerds-krzysztof. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

Up ;)

[borrmann]

This issue is still active. here is a reproduction

border.drawing.mp4

[borrmann]

@PureWeen the original poster deleted their account. I provided a reproduction though. could you please reopen the issue?

[borrmann]

@QianaJiao could this issue please be reopened? The bug still persists and I posted a reproduction repo