Fixes dotnet#18204 border lagging behind content on iOS and improves …

…initial render performance

src/Controls/tests/TestCases/Issues/Issue18204.xaml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Maui.Controls.Sample.Issues.Issue18204"
+             Title="Issue18204">
+
+    <VerticalStackLayout Padding="24">
+      <Border
+        HorizontalOptions="Center"
+        x:Name="TheBorder"
+        BackgroundColor="LightBlue"
+        Shadow="{Shadow Brush=Black, Offset='0,2', Radius=2, Opacity=0.20}"
+        StrokeShape="{RoundRectangle CornerRadius=20}">
+        <Button x:Name="TheButton" Clicked="ButtonClicked" BackgroundColor="LightGreen" WidthRequest="200" HeightRequest="500" />
+      </Border>
+    </VerticalStackLayout>
+</ContentPage>

src/Controls/tests/TestCases/Issues/Issue18204.xaml.cs

@@ -0,0 +1,25 @@
+using System;
+using Microsoft.Maui;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Xaml;
+
+namespace Maui.Controls.Sample.Issues;
+
+[XamlCompilation(XamlCompilationOptions.Compile)]
+[Issue(IssueTracker.Github, 18204, "[iOS] Drawing of Borders lags behind other elements creating bizarre overlaps and glitches", PlatformAffected.iOS)]
+
+public partial class Issue18204 : ContentPage
+{
+	public Issue18204()
+	{
+		InitializeComponent();
+	}
+
+	private void ButtonClicked(object sender, EventArgs e)
+	{
+		var button = (Button)sender;
+		button.CancelAnimations();
+		var targetHeight = button.HeightRequest == 200.0 ? 500.0 : 200.0;
+		button.Animate("Height", new Animation(v => button.HeightRequest = v, button.Height, targetHeight, Easing.Linear));
+	}
+}

src/Core/src/Handlers/Border/BorderHandler.iOS.cs

@@ -60,16 +60,5 @@ public override void SetVirtualView(IView view)
 				platformView.AddSubview(platformContent);
 			}
 		}
-
-		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();
-		}
 	}
 }

src/Core/src/Platform/iOS/ContentView.cs

@@ -27,7 +27,7 @@ public override void LayoutSubviews()
 			base.LayoutSubviews();
 
 			UpdateClip();
-			this.UpdateMauiCALayer();
+			this.UpdateMauiCALayerFrame();
 		}
 
 		internal IBorderStroke? Clip

src/Core/src/Platform/iOS/StrokeExtensions.cs

@@ -1,4 +1,5 @@
-using System.Linq;
+using System.Collections.Generic;
+using System.Linq;
 using CoreAnimation;
 using CoreGraphics;
 using Microsoft.Maui.Graphics;
@@ -105,13 +106,15 @@ internal static void UpdateMauiCALayer(this UIView platformView, IBorderStroke?
 		{
 			CALayer? backgroundLayer = platformView.Layer as MauiCALayer;
 
+			var initialRender = false;
 			if (backgroundLayer == null)
 			{
 				backgroundLayer = platformView.Layer?.Sublayers?
 					.FirstOrDefault(x => x is MauiCALayer);
 
 				if (backgroundLayer == null)
 				{
+					initialRender = true;
 					backgroundLayer = new MauiCALayer
 					{
 						Name = ViewExtensions.BackgroundLayerName
@@ -122,6 +125,13 @@ internal static void UpdateMauiCALayer(this UIView platformView, IBorderStroke?
 				}
 			}
 
+			// While we're in the process of connecting the handler properties will not change
+			// So it's useless to update the layer many times with the same value
+			if (platformView is ContentView { View: null } && !initialRender)
+			{
+				return;
+			}
+
 			if (backgroundLayer is MauiCALayer mauiCALayer)
 			{
 				backgroundLayer.Frame = platformView.Bounds;
@@ -149,27 +159,48 @@ internal static void UpdateMauiCALayer(this UIView platformView, IBorderStroke?
 				contentView.Clip = border;
 		}
 
-		internal static void UpdateMauiCALayer(this UIView view)
+		internal static void UpdateMauiCALayerFrame(this UIView view)
 		{
-			if (view == null || view.Frame.IsEmpty)
+			if (view.Frame.IsEmpty)
+			{
 				return;
+			}
 
 			var layer = view.Layer;
 
-			UpdateBackgroundLayer(layer, view.Bounds);
+			if (layer.Sublayers is { Length: > 0 } sublayers && 
+			    sublayers.GetBackgroundLayersNeedingUpdate(view.Bounds).ToArray() is { Length: > 0 } backgroundLayers)
+			{
+				// iOS by default adds animations to certain actions such as layer resizing (setting the Frame property).
+				// This can result in the background layer not keeping up with animations controlled by MAUI.
+				// To prevent this undesired effect, native animations will be turned off for the duration of the operation.
+				CATransaction.Begin();
+				CATransaction.AnimationDuration = 0;
+
+				foreach (CALayer backgroundLayer in backgroundLayers)
+				{
+					backgroundLayer.Frame = view.Bounds;
+				}
+
+				CATransaction.Commit();
+			}
 		}
-
-		static void UpdateBackgroundLayer(this CALayer layer, CGRect bounds)
+		
+		static IEnumerable<CALayer> GetBackgroundLayersNeedingUpdate(this CALayer[] layers, CGRect bounds)
 		{
-			var sublayers = layer?.Sublayers;
-			if (sublayers is not null)
+			foreach (var layer in layers)
 			{
-				foreach (var sublayer in sublayers)
+				if (layer.Sublayers is { Length: > 0 } sublayers)
 				{
-					UpdateBackgroundLayer(sublayer, bounds);
+					foreach (var sublayer in GetBackgroundLayersNeedingUpdate(sublayers, bounds))
+					{
+						yield return sublayer;
+					}
+				}
 
-					if (sublayer.Name == ViewExtensions.BackgroundLayerName && sublayer.Frame != bounds)
-						sublayer.Frame = bounds;
+				if (layer.Name == ViewExtensions.BackgroundLayerName && layer.Frame != bounds)
+				{
+					yield return layer;
 				}
 			}
 		}

src/Core/src/PublicAPI/net-ios/PublicAPI.Unshipped.txt

@@ -160,5 +160,5 @@ Microsoft.Maui.Platform.MauiView.IsMeasureValid(double widthConstraint, double h
 *REMOVED*override Microsoft.Maui.Platform.ContentView.SetNeedsLayout() -> void
 Microsoft.Maui.Platform.UIEdgeInsetsExtensions
 static Microsoft.Maui.Platform.UIEdgeInsetsExtensions.ToThickness(this UIKit.UIEdgeInsets insets) -> Microsoft.Maui.Thickness
-override Microsoft.Maui.Handlers.BorderHandler.PlatformArrange(Microsoft.Maui.Graphics.Rect rect) -> void
+*REMOVED*override Microsoft.Maui.Handlers.BorderHandler.PlatformArrange(Microsoft.Maui.Graphics.Rect rect) -> void
 *REMOVED*override Microsoft.Maui.Platform.MauiLabel.InvalidateIntrinsicContentSize() -> void