Border's corner radius malform during expand animation

jnnguyen12 commented 1 month ago

Description

Border's corner radius does not stay the same, and inconsistently changes during the duration of animation. However, the exact same animation logic and layout works perfectly for Frame.

The red trashcan button using a Frame, which is working perfectly as expected

https://github.com/dotnet/maui/assets/105896253/657a8e35-8fd5-4015-b5f9-07fe900fba0b

Using Border:

https://github.com/dotnet/maui/assets/105896253/6175aaed-8b29-4f3d-8404-830a84b14cc4

Steps to Reproduce

Create the button:

    <Grid VerticalOptions="End" Margin="0, 20, 0, 0" x:Name="WrappingGrid"> <!-- wrapping grid takes up the whole screen -->
        <Border StrokeShape="RoundRectangle 50" HorizontalOptions="Start" x:Name="DeleteSection">
            <Grid IsClippedToBounds="True">
                    <HorizontalStackLayout Spacing="10" Margin="12, 0">
                        <Image Source="trash_can_solid" WidthRequest="20" />
                    </HorizontalStackLayout>
             </Grid>
         </Border>
        <!-- some buttons here -->
    </Grid>

Wire animation logic

private async void ExpandDelete(object sender, TappedEventArgs e)
{
    var width = WrappingGrid.Width;
    var expandAnimation = new Animation(
                  v => DeleteSection.WidthRequest = v, DeleteSection.Width, width
             );

    expandAnimation.Commit(this, "expandSection", 16, 2000, Easing.Default);

            await Task.Delay(2000);
}

private async void CollapseDelete(object sender, TappedEventArgs e)
{
    var width = WrappingGrid.Width;
    var collapseAnimation = new Animation(
                  v => DeleteSection.WidthRequest = v, width, 52
             );

    collapseAnimation.Commit(this, "collapseSection", 16, 2000, Easing.Default);

            await Task.Delay(2000);
}

Expected: To work exactly like Frame does. Actual: Corner radius perpetually stays the same throughout the animation, but shows up morphed and weird.

Link to public reproduction project repository

No response

Version with bug

7.0.49

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, I was not able test on other platforms

Affected platform versions

No response

Did you find any workaround?

Used Frame instead with a thinner border width

Relevant log output

No response

github-actions[bot] commented 1 month ago

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 and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Border has an unexpected background animation (#21643), similarity score: 0.83

Closed similar issues:

Border size changes appear to be animated on iOS/MacCatalyst (#15363), similarity score: 0.84
Nested Border renders top left corner bizarrely wrong with truncation in iOS/Windows (okay in Android) (#17761), similarity score: 0.81
[Android] Button Corner Radius is broken with high BorderWidth values (#12056), similarity score: 0.79
iOS Border crops/masks underlying elements wrong with clearly abnormal visual effect (iOS only) - repro project included (#17998), similarity score: 0.79

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

MAUIoxo commented 1 month ago

What happens if you use <Border StrokeShape="RoundRectangle 50, 50, 50, 50" …/>?

jnnguyen12 commented 1 month ago

What happens if you use <Border StrokeShape="RoundRectangle 50, 50, 50, 50" …/>?

It produces the same issue.

MAUIoxo commented 1 month ago

Thanks for letting me know!

dotnet / maui