Border size changes appear to be animated on iOS/MacCatalyst

[DancesWithDingo]

Description

When I use the Border control in a page, when first drawn (and in subsequent redraws/resizes) the border/contents appear to animate the changes. This results in weird visual artifacts that don't occur when using layout controls with background color set.

Steps to Reproduce

Create a .NET MAUI project with a button and a border within a vertical stack layout. Wire up the button click handler so it toggles the width of the border. Notice that the border size change seems to be animated as compared to the vertical stack layout without the border. This only happens on iOS and MacCatalyst.

<VerticalStackLayout Spacing="20" Padding="20">
    <Button Text="Toggle Width" HorizontalOptions="Center" Clicked="Button_Clicked"/>
    <VerticalStackLayout x:Name="Container" Spacing="20" MinimumWidthRequest="100">
        <Border Stroke="Firebrick" StrokeThickness="10" BackgroundColor="Yellow" HeightRequest="200">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="20"/>
            </Border.StrokeShape>
        </Border>

        <VerticalStackLayout HeightRequest="200" BackgroundColor="Orange"/>
    </VerticalStackLayout>
</VerticalStackLayout>

void Button_Clicked(System.Object sender, System.EventArgs e) {
    Container.HorizontalOptions = Container.HorizontalOptions.Alignment == LayoutOptions.Fill.Alignment ? LayoutOptions.Start : LayoutOptions.Fill;
}

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-05-30.at.15.19.38.mp4

Link to public reproduction project repository

https://github.com/DancesWithDingo/MAUI_BorderFillChange.git

Version with bug

7.0.49

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 16.4

Did you find any workaround?

No. And the visual impact can be horrendous when many borders appear on a page.

Relevant log output

No response

[SyntaxDomain]

Has anyone found a work around for this? I am also suffering grief from this animation. I have had to switch some of my Borders to Frames until this issue is resolved or a workaround is found.

For reference, in an attempt to debug the problem I tried overriding most methods in BorderHandler and doing this:

UIView.PerformWithoutAnimation(() =>
{
CATransaction.Begin();
CATransaction.DisableActions = true;

//Original base method call

CATransaction.Commit();

});

But this did NOT work.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[Hooterr]

It's a default iOS behavior but it would be great to be able to control it. It's super unnatural in collection views when you scroll through items and everything just animates like crazy.

[Hooterr]

Microsoft.Maui.Handlers.BorderHandler.Mapper.PrependToMapping("DON'T ANIMATE YOU FILTHY ANIMAL", (handler, view) =>
{
    foreach (var layer in handler.PlatformView.Layer.Sublayers)
    {
        layer.RemoveAllAnimations();
    }
    handler.PlatformView.Layer.RemoveAllAnimations();

});

This sort of worked for me. It doesn't remove all the animations but in a collection view it stops doing background animations.

[DancesWithDingo]

It’s good to learn that this is coming from CALayer. Thanks for your research.

[DancesWithDingo]

I've created a temporary workaround for the Border control by using a behavior that sets PlatformView's Layer properties. I updated the sample repository to show an example of usage. In this case, the behavior works on any layout control, but I'm using it by temporarily replacing Border with ContentView.

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-06-26.at.09.15.34.mp4

It's a bit inelegant, but as I only use Border within my own BorderView control, it was a quick fix that can be removed when Border is repaired. My borders all use a round rectangle, but other shapes can be implemented.

The second rectangle (light green) is a VSL with the BorderBehavior added.

Note the green bar: that's to prove that the borders are actually the correct thickness. Apparently there's a bug on iOS that renders borders at half the thickness specified...I've only just noticed it, but it doesn't happen on Android so it's likely a bug. I'll have to report that a little later.

[DancesWithDingo]

Having researched the issue over the weekend, all stroke-related changes call the Microsoft.Maui.Platform.StrokeExtensions.UpdateMauiCALayer(UIView)
extension method. If implicit animations were disable-able within this method somehow (possibly with an iOS platform configuration on View), the developer would have more control and there would be better parity with other MAUI platforms.

Link to handler code here.

[matheusouz]

I had the same problem, that was fixed in this PR https://github.com/dotnet/maui/pull/15856/files, its easy to apply the fix while is not release to .NET 7

[durandt]

@matheusouz Would you care to share your workaround/fix? The PR fixes 3-4 issues and has changes to the iOS ContentView that I don't find so easy to apply. How did you go about, and what pieces did you take from the PR? (I'm mainly interested in stopping the size change animation)

What I have tried is subclassing the BorderHandler and overriding PlatformArrange:

public class BorderWorkaroundMaui15363Handler : BorderHandler
{
	public override void PlatformArrange(Rect rect)
	{
		// Disable the animation during arrange for the Border; otherwise, all resizing actions
		// will animate, and it makes the Border lag behind its content.

		CATransaction.Begin();
		CATransaction.AnimationDuration = 0;
		base.PlatformArrange(rect);
		CATransaction.Commit();
	}
}

And register the handler for Border:

public static MauiAppBuilder ConfigureIosBorderWorkaroundsMaui15363(this MauiAppBuilder builder)
{
    builder.ConfigureMauiHandlers(handlers =>
    {
        handlers.AddHandler<Border, BorderWorkaroundMaui15363Handler>();
    });
    return builder;
}

I can see that my PlatformArrange-override is called, but the animation is still visible.