[iOS, Border] Border with a inner image doesn't animate right

[pictos]

Description

On iOS, when I have an image inside a border and make it rounded and animate it part of the image disappears.

Steps to Reproduce

Run the linked project

Link to public reproduction project repository

https://github.com/pictos/borderanimationbug

Version with bug

9.0.40 SR4

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

9.0.0 GA

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No

Relevant log output

[similar-issues-ai]

We've found some similar issues:

• iOS Border crops/masks underlying elements wrong with clearly abnormal visual effect (iOS only) - repro project included #17998 , similarity score: 83%
• Border has an unexpected background animation #21643 , similarity score: 83%
• [IOS] The Border control has undesired animation. #22329 , similarity score: 83%
• iOS animated border #24104 , similarity score: 82%
• Border control for image with rounded corners doesnt work on iOS #9952 , similarity score: 81%
• Border's corner radius malform during expand animation #22499 , similarity score: 81%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

[Marnie-Majait]

This issue has been verified Visual Studio 17.14 Preview 1.1(9.0.40 & 9.0.30 & 9.0.22 & 9.0.0 & 8.0.100 & 8.0.3). Can repro this issue on iOS platform.

[albyrock87]

The problem appears to be in Microsoft.Maui.Platform.ContentView in the way we handle UpdateClip().
We're applying the clip Mask to the Border's child main layer which is then affected by rotation.
It's not very clear to me why that weird effect happens that way.
This is not an easy fix, as an eventual Shadow applied to the Border's Layer must not be clipped, so if we move the clip one layer up, then we break Shadow+Clip.

Anyway, to work around this, just put a layer in between:

<Border
    x:Name="imgBorder"
    StrokeShape="{RoundRectangle}">
    <Grid>
        <Image
            x:Name="albumArt"
            Source="dotnet_bot.png"
            Aspect="AspectFit"/>
    </Grid>
</Border>