Fix border lagging and unwanted animations on iOS (dotnet#24360)

* Fix border lagging and unwanted animations on iOS * Update src/Core/src/Platform/iOS/StrokeExtensions.cs Co-authored-by: MartyIX <[email protected]> * Add some control on the test case * Ensure every CALayer used by MAUI does not use animations. --------- Co-authored-by: MartyIX <[email protected]>
kubaflo · Sep 7, 2024 · 2c7458e · 2c7458e
1 parent 336f7f4
commit 2c7458e
Show file tree

Hide file tree

Showing 18 changed files with 148 additions and 136 deletions.
diff --git a/src/Compatibility/Core/src/MacOS/Extensions/BrushExtensions.cs b/src/Compatibility/Core/src/MacOS/Extensions/BrushExtensions.cs
@@ -60,7 +60,7 @@ public static CAGradientLayer GetBackgroundLayer(this NSView control, Brush brus
 				var p1 = linearGradientBrush.StartPoint;
 				var p2 = linearGradientBrush.EndPoint;
 
-				var linearGradientLayer = new CAGradientLayer
+				var linearGradientLayer = new StaticCAGradientLayer
 				{
 					Name = BackgroundLayer,
 					AutoresizingMask = CAAutoresizingMask.HeightSizable | CAAutoresizingMask.WidthSizable,
@@ -86,7 +86,7 @@ public static CAGradientLayer GetBackgroundLayer(this NSView control, Brush brus
 				var center = radialGradientBrush.Center;
 				var radius = radialGradientBrush.Radius;
 
-				var radialGradientLayer = new CAGradientLayer
+				var radialGradientLayer = new StaticCAGradientLayer
 				{
 					Name = BackgroundLayer,
 					Frame = control.Bounds,

diff --git a/src/Compatibility/Core/src/iOS/VisualElementTracker.cs b/src/Compatibility/Core/src/iOS/VisualElementTracker.cs
@@ -416,7 +416,7 @@ void UpdateClip()
 			var formsGeometry = element.Clip;
 			var nativeGeometry = formsGeometry.ToCGPath();
 
-			var maskLayer = new CAShapeLayer
+			var maskLayer = new StaticCAShapeLayer
 			{
 				Name = ClipShapeLayer,
 				Path = nativeGeometry.Data,

diff --git a/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellFlyoutLayoutManager.cs b/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellFlyoutLayoutManager.cs
@@ -293,7 +293,7 @@ void LayoutHeader(CGRect parentFrame)
 				if (_context.Shell.FlyoutHeaderBehavior == FlyoutHeaderBehavior.Scroll && HeaderViewTopVerticalOffset > 0 && _headerOffset < 0)
 				{
 					var headerHeight = Math.Max(HeaderMinimumHeight, ArrangedHeaderViewHeightWithMargin + _headerOffset);
-					CAShapeLayer shapeLayer = new CAShapeLayer();
+					CAShapeLayer shapeLayer = new StaticCAShapeLayer();
 					CGRect rect = new CGRect(0, _headerOffset * -1, parentFrame.Width, headerHeight);
 					var path = CGPath.FromRect(rect);
 					shapeLayer.Path = path;

diff --git a/src/Controls/src/Core/Platform/iOS/Extensions/BrushExtensions.cs b/src/Controls/src/Core/Platform/iOS/Extensions/BrushExtensions.cs
@@ -44,7 +44,7 @@ public static CALayer GetBackgroundLayer(this UIView control, Brush brush)
 
 			if (brush is SolidColorBrush solidColorBrush)
 			{
-				var linearGradientLayer = new CALayer
+				var linearGradientLayer = new StaticCALayer
 				{
 					Name = BackgroundLayer,
 					ContentsGravity = CALayer.GravityResizeAspectFill,
@@ -60,7 +60,7 @@ public static CALayer GetBackgroundLayer(this UIView control, Brush brush)
 				var p1 = linearGradientBrush.StartPoint;
 				var p2 = linearGradientBrush.EndPoint;
 
-				var linearGradientLayer = new CAGradientLayer
+				var linearGradientLayer = new StaticCAGradientLayer
 				{
 					Name = BackgroundLayer,
 					ContentsGravity = CALayer.GravityResizeAspectFill,
@@ -85,7 +85,7 @@ public static CALayer GetBackgroundLayer(this UIView control, Brush brush)
 				var center = radialGradientBrush.Center;
 				var radius = radialGradientBrush.Radius;
 
-				var radialGradientLayer = new CAGradientLayer
+				var radialGradientLayer = new StaticCAGradientLayer
 				{
 					Name = BackgroundLayer,
 					ContentsGravity = CALayer.GravityResizeAspectFill,
@@ -176,30 +176,8 @@ public static void RemoveBackgroundLayer(this CALayer layer)
 			}
 		}
 
-		public static void UpdateBackgroundLayer(this UIView view)
-		{
-			if (view == null || view.Frame.IsEmpty)
-				return;
-
-			var layer = view.Layer;
-
-			UpdateBackgroundLayer(layer, view.Bounds);
-		}
-
-		static void UpdateBackgroundLayer(this CALayer layer, CGRect bounds)
-		{
-			var sublayers = layer?.Sublayers;
-			if (sublayers is not null)
-			{
-				foreach (var sublayer in sublayers)
-				{
-					UpdateBackgroundLayer(sublayer, bounds);
-
-					if (sublayer.Name == BackgroundLayer && sublayer.Frame != bounds)
-						sublayer.Frame = bounds;
-				}
-			}
-		}
+		public static void UpdateBackgroundLayer(this UIView view) =>
+			view.UpdateBackgroundLayerFrame(BackgroundLayer);
 
 		static CGPoint GetRadialGradientBrushEndPoint(Point startPoint, double radius)
 		{

diff --git a/src/Controls/tests/TestCases.HostApp/Issues/Issue18204.xaml b/src/Controls/tests/TestCases.HostApp/Issues/Issue18204.xaml
@@ -3,15 +3,58 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Maui.Controls.Sample.Issues.Issue18204"
              Title="Issue18204">
-
-    <VerticalStackLayout Padding="24">
+    <ContentPage.Resources>
+      <Color x:Key="TealFadeStart">#1B836D</Color>
+      <Color x:Key="TealFadeEnd">#015b66</Color>
+      <Color x:Key="TealFadeStartHover">#2aab88</Color>
+      <Color x:Key="TealFadeEndHover">#026875</Color>
+    </ContentPage.Resources>
+    <VerticalStackLayout Padding="24" Spacing="30">
+      <Button AutomationId="ChangeSize"
+              Clicked="ChangeSizeClicked"
+              Text="Change Size"
+              BackgroundColor="WhiteSmoke"
+              WidthRequest="200" />
+      <Button AutomationId="ShowHide"
+              Clicked="ShowHideClicked"
+              Text="Show/Hide"
+              BackgroundColor="WhiteSmoke"
+              WidthRequest="200" />
       <Border
         HorizontalOptions="Center"
-        x:Name="TheBorder"
         BackgroundColor="LightBlue"
-        Shadow="{Shadow Brush=Black, Offset='0,2', Radius=2, Opacity=0.20}"
+        Shadow="{Shadow Brush=Black, Offset='0,2', Radius=24, Opacity=0.2}"
         StrokeShape="{RoundRectangle CornerRadius=20}">
-        <Button x:Name="TheButton" Clicked="ButtonClicked" BackgroundColor="LightGreen" WidthRequest="200" HeightRequest="500" />
+        <Button x:Name="TheButton" BackgroundColor="LightGreen" WidthRequest="200" HeightRequest="400" />
+      </Border>
+      <Border x:Name="TheOtherButton"
+              BackgroundColor="Transparent"
+              StrokeShape="{RoundRectangle CornerRadius=20}"
+              StrokeThickness="0"
+              Shadow="{Shadow Brush=Black, Offset='0,2', Radius=24, Opacity=0.5}"
+              IsVisible="False"
+              Stroke="Transparent">
+        <Border.Background>
+          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
+            <GradientStop Offset="0.1" Color="{DynamicResource TealFadeEnd}" />
+            <GradientStop Offset="1.0" Color="{DynamicResource TealFadeStart}" />
+          </LinearGradientBrush>
+        </Border.Background>
+        <Border.Content>
+          <Grid ColumnDefinitions="auto,*,auto"
+                Padding="16,8">
+              <Label Grid.Column="0"
+                     FontSize="24"
+                     Text="Hello" />
+              <Label Grid.Column="1"
+                     FontSize="24"
+                     Text="awesome"
+                     HorizontalTextAlignment="Center"/>
+              <Label Grid.Column="2"
+                     FontSize="24"
+                     Text="World!" />
+          </Grid>
+        </Border.Content>
       </Border>
     </VerticalStackLayout>
 </ContentPage>
diff --git a/src/Controls/tests/TestCases.HostApp/Issues/Issue18204.xaml.cs b/src/Controls/tests/TestCases.HostApp/Issues/Issue18204.xaml.cs
@@ -15,11 +15,17 @@ public Issue18204()
 		InitializeComponent();
 	}
 
-	private void ButtonClicked(object sender, EventArgs e)
+	private void ChangeSizeClicked(object sender, EventArgs e)
 	{
-		var button = (Button)sender;
+		var button = TheButton;
 		button.CancelAnimations();
-		var targetHeight = button.HeightRequest == 200.0 ? 500.0 : 200.0;
+		var targetHeight = button.HeightRequest == 200.0 ? 400.0 : 200.0;
 		button.Animate("Height", new Animation(v => button.HeightRequest = v, button.Height, targetHeight, Easing.Linear));
 	}
+
+	private void ShowHideClicked(object sender, EventArgs e)
+	{
+		var button = TheOtherButton;
+		button.IsVisible = !button.IsVisible;
+	}
 }
diff --git a/src/Core/src/Graphics/PaintExtensions.iOS.cs b/src/Core/src/Graphics/PaintExtensions.iOS.cs
@@ -31,7 +31,7 @@ public static partial class PaintExtensions
 
 		public static CALayer? CreateCALayer(this SolidPaint solidPaint, CGRect frame = default)
 		{
-			var solidColorLayer = new CALayer
+			var solidColorLayer = new StaticCALayer
 			{
 				ContentsGravity = CALayer.GravityResizeAspectFill,
 				Frame = frame,
@@ -57,7 +57,7 @@ public static partial class PaintExtensions
 			var p1 = linearGradientPaint.StartPoint;
 			var p2 = linearGradientPaint.EndPoint;
 
-			var linearGradientLayer = new CAGradientLayer
+			var linearGradientLayer = new StaticCAGradientLayer
 			{
 				ContentsGravity = CALayer.GravityResizeAspectFill,
 				Frame = frame,
@@ -81,7 +81,7 @@ public static partial class PaintExtensions
 			var center = radialGradientPaint.Center;
 			var radius = radialGradientPaint.Radius;
 
-			var radialGradientLayer = new CAGradientLayer
+			var radialGradientLayer = new StaticCAGradientLayer
 			{
 				ContentsGravity = CALayer.GravityResizeAspectFill,
 				Frame = frame,

diff --git a/src/Core/src/Handlers/Border/BorderHandler.iOS.cs b/src/Core/src/Handlers/Border/BorderHandler.iOS.cs
@@ -20,11 +20,6 @@ protected override ContentView CreatePlatformView()
 			};
 		}
 
-		protected override void ConnectHandler(ContentView platformView)
-		{
-			base.ConnectHandler(platformView);
-		}
-
 		protected override void DisconnectHandler(ContentView platformView)
 		{
 			base.DisconnectHandler(platformView);

diff --git 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.UpdateBackgroundLayerFrame();
 		}
 
 		internal IBorderStroke? Clip
@@ -78,7 +78,7 @@ void UpdateClip()
 				return;
 			}
 
-			_contentMask ??= new CAShapeLayer();
+			_contentMask ??= new StaticCAShapeLayer();
 
 			var bounds = Bounds;
 
@@ -93,12 +93,6 @@ void UpdateClip()
 			var clipBounds = new RectF(0, 0, clipWidth, clipHeight);
 			_contentMask.Path = GetClipPath(clipBounds, strokeThickness);
 
-			// Set the mask on the content, if it isn't already
-			if (content.Layer.Mask != _contentMask)
-			{
-				content.Layer.Mask = _contentMask;
-			}
-
 			// Since the mask is on the content's CALayer, it's anchored to the content. But we need it to be
 			// relative to _this_ container. So we need to compute an adjusted position for it.
 
@@ -112,16 +106,14 @@ void UpdateClip()
 
 			CGPoint adjustedMaskPosition = new(clipCenterX - contentOffsetX, clipCenterY - contentOffsetY);
 
-			// Relocating/resizing a layer is animated by default; the mask will slide around as we do things like
-			// resize the content that's being masked. To prevent his, we need to set the animation duration 
-			// to zero during the operation. We'll do that in its own transaction so as not to change the default
-			// animation durations for everything else.
-
-			CATransaction.Begin();
-			CATransaction.AnimationDuration = 0;
 			_contentMask.Bounds = clipBounds;
 			_contentMask.Position = adjustedMaskPosition;
-			CATransaction.Commit();
+
+			// Set the mask on the content, if it isn't already
+			if (content.Layer.Mask != _contentMask)
+			{
+				content.Layer.Mask = _contentMask;
+			}
 		}
 
 		CGPath? GetClipPath(RectF bounds, float strokeThickness)

diff --git a/src/Core/src/Platform/iOS/MauiCALayer.cs b/src/Core/src/Platform/iOS/MauiCALayer.cs
@@ -5,7 +5,6 @@
 using CoreGraphics;
 using Microsoft.Maui.Graphics;
 using Microsoft.Maui.Graphics.Platform;
-using ObjCRuntime;
 using UIKit;
 
 namespace Microsoft.Maui.Platform
@@ -38,6 +37,11 @@ public MauiCALayer()
 			ContentsScale = UIScreen.MainScreen.Scale;
 		}
 
+		public override void AddAnimation(CAAnimation animation, string? key)
+		{
+			// Do nothing, we don't want animations here
+		}
+
 		public override void LayoutSublayers()
 		{
 			base.LayoutSublayers();

diff --git a/src/Core/src/Platform/iOS/StaticCAGradientLayer.cs b/src/Core/src/Platform/iOS/StaticCAGradientLayer.cs
@@ -0,0 +1,11 @@
+using CoreAnimation;
+
+namespace Microsoft.Maui.Platform;
+
+class StaticCAGradientLayer : CAGradientLayer
+{
+	public override void AddAnimation(CAAnimation animation, string? key)
+	{
+		// Do nothing, we don't want animations here
+	}
+}
diff --git a/src/Core/src/Platform/iOS/StaticCALayer.cs b/src/Core/src/Platform/iOS/StaticCALayer.cs
@@ -0,0 +1,11 @@
+using CoreAnimation;
+
+namespace Microsoft.Maui.Platform;
+
+class StaticCALayer : CALayer
+{
+	public override void AddAnimation(CAAnimation animation, string? key)
+	{
+		// Do nothing, we don't want animations here
+	}
+}
diff --git a/src/Core/src/Platform/iOS/StaticCAShapeLayer.cs b/src/Core/src/Platform/iOS/StaticCAShapeLayer.cs
@@ -0,0 +1,11 @@
+using CoreAnimation;
+
+namespace Microsoft.Maui.Platform;
+
+class StaticCAShapeLayer : CAShapeLayer
+{
+	public override void AddAnimation(CAAnimation animation, string? key)
+	{
+		// Do nothing, we don't want animations here
+	}
+}