From 8f3a94f9b6b21be5bf5549d52d24265376d7b1a2 Mon Sep 17 00:00:00 2001
From: Alberto Aldegheri <albyrock87@gmail.com>
Date: Thu, 20 Jun 2024 12:43:27 +0200
Subject: [PATCH] Fixes #18204 border lagging behind content on iOS and
 improves initial render performance

---
 .../tests/TestCases/Issues/Issue18204.xaml    | 17 ++++++
 .../tests/TestCases/Issues/Issue18204.xaml.cs | 25 +++++++++
 .../src/Handlers/Border/BorderHandler.iOS.cs  | 11 ----
 src/Core/src/Platform/iOS/ContentView.cs      |  2 +-
 src/Core/src/Platform/iOS/StrokeExtensions.cs | 55 +++++++++++++++----
 .../PublicAPI/net-ios/PublicAPI.Unshipped.txt |  2 +-
 6 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 src/Controls/tests/TestCases/Issues/Issue18204.xaml
 create mode 100644 src/Controls/tests/TestCases/Issues/Issue18204.xaml.cs

diff --git a/src/Controls/tests/TestCases/Issues/Issue18204.xaml b/src/Controls/tests/TestCases/Issues/Issue18204.xaml
new file mode 100644
index 000000000000..f3bb0113e435
--- /dev/null
+++ b/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>
diff --git a/src/Controls/tests/TestCases/Issues/Issue18204.xaml.cs b/src/Controls/tests/TestCases/Issues/Issue18204.xaml.cs
new file mode 100644
index 000000000000..74e390b4a32e
--- /dev/null
+++ b/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));
+	}
+}
diff --git a/src/Core/src/Handlers/Border/BorderHandler.iOS.cs b/src/Core/src/Handlers/Border/BorderHandler.iOS.cs
index 65f77e8a5ace..f68457d098d9 100644
--- a/src/Core/src/Handlers/Border/BorderHandler.iOS.cs
+++ b/src/Core/src/Handlers/Border/BorderHandler.iOS.cs
@@ -60,16 +60,5 @@ static partial void UpdateContent(IBorderHandler handler)
 				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();
-		}
 	}
 }
\ No newline at end of file
diff --git a/src/Core/src/Platform/iOS/ContentView.cs b/src/Core/src/Platform/iOS/ContentView.cs
index 06f933192eb6..4934ee90f259 100644
--- a/src/Core/src/Platform/iOS/ContentView.cs
+++ b/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
diff --git a/src/Core/src/Platform/iOS/StrokeExtensions.cs b/src/Core/src/Platform/iOS/StrokeExtensions.cs
index 3e97c13d2891..5c7f8e722b3f 100644
--- a/src/Core/src/Platform/iOS/StrokeExtensions.cs
+++ b/src/Core/src/Platform/iOS/StrokeExtensions.cs
@@ -105,6 +105,7 @@ internal static void UpdateMauiCALayer(this UIView platformView, IBorderStroke?
 		{
 			CALayer? backgroundLayer = platformView.Layer as MauiCALayer;
 
+			var initialRender = false;
 			if (backgroundLayer == null)
 			{
 				backgroundLayer = platformView.Layer?.Sublayers?
@@ -112,6 +113,7 @@ internal static void UpdateMauiCALayer(this UIView platformView, IBorderStroke?
 
 				if (backgroundLayer == null)
 				{
+					initialRender = true;
 					backgroundLayer = new MauiCALayer
 					{
 						Name = ViewExtensions.BackgroundLayerName
@@ -122,6 +124,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,28 +158,52 @@ 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)
+			{
+				UpdateBackgroundLayers(sublayers, view.Bounds);
+			}
 		}
-
-		static void UpdateBackgroundLayer(this CALayer layer, CGRect bounds)
+		
+		static void UpdateBackgroundLayers(this CALayer[] layers, CGRect bounds, bool rootLayers = true)
 		{
-			var sublayers = layer?.Sublayers;
-			if (sublayers is not null)
+			var caTransactionBegun = false;
+			foreach (var layer in layers)
 			{
-				foreach (var sublayer in sublayers)
+				if (layer.Sublayers is { Length: > 0 } sublayers)
+				{
+					UpdateBackgroundLayers(sublayers, bounds);
+				}
+
+				if (layer.Name != ViewExtensions.BackgroundLayerName || layer.Frame == bounds)
 				{
-					UpdateBackgroundLayer(sublayer, bounds);
+					continue;
+				}
 
-					if (sublayer.Name == ViewExtensions.BackgroundLayerName && sublayer.Frame != bounds)
-						sublayer.Frame = bounds;
+				// 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.
+				if (rootLayers && !caTransactionBegun)
+				{
+					CATransaction.Begin();
+					CATransaction.AnimationDuration = 0;
+					caTransactionBegun = true;
 				}
+				
+				layer.Frame = bounds;
+			}
+			
+			if (caTransactionBegun)
+			{
+				CATransaction.Commit();
 			}
 		}
 	}
diff --git a/src/Core/src/PublicAPI/net-ios/PublicAPI.Unshipped.txt b/src/Core/src/PublicAPI/net-ios/PublicAPI.Unshipped.txt
index 1152b0f568a1..179dc1fe0b48 100644
--- a/src/Core/src/PublicAPI/net-ios/PublicAPI.Unshipped.txt
+++ b/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
\ No newline at end of file