Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue32042.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
using Microsoft.Maui.Controls.Shapes;
using Microsoft.Maui.Layouts;

namespace Maui.Controls.Sample.Issues;

[Issue(IssueTracker.Github, 32042, "Rectangle appears blurred on iOS and macOS when its bounds are changed at runtime within an AbsoluteLayout", PlatformAffected.iOS | PlatformAffected.macOS)]
public class Issue32042 : ContentPage
{
AbsoluteLayout absoluteLayout;
Rectangle rectangle;
Button changeBoundsButton;

public Issue32042()
{
// Create the AbsoluteLayout
absoluteLayout = new AbsoluteLayout
{
BackgroundColor = Colors.LightGray
};

// Create the Rectangle
rectangle = new Rectangle
{
BackgroundColor = Colors.Green,
};

// Create the description label
Label label = new Label
{
Text = "The green square must remain sharp after its bounds are updated at runtime; otherwise test failed.",
LineBreakMode = LineBreakMode.WordWrap,
MaximumWidthRequest = 300,
};

// Position the label at the top
AbsoluteLayout.SetLayoutBounds(label, new Rect(0.5, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);

// Initially set Rectangle position below the label
AbsoluteLayout.SetLayoutBounds(rectangle, new Rect(0.5, 0.3, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(rectangle, AbsoluteLayoutFlags.PositionProportional);

// Create the Button
changeBoundsButton = new Button
{
Text = "Change Bounds",
AutomationId = "Issue32042Button"
};

AbsoluteLayout.SetLayoutBounds(changeBoundsButton, new Rect(0.5, 0.9, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(changeBoundsButton, AbsoluteLayoutFlags.PositionProportional);

// Attach click event
changeBoundsButton.Clicked += OnChangeBoundsClicked;

// Add children to layout - order matters for z-index
absoluteLayout.Children.Add(label);
absoluteLayout.Children.Add(rectangle);
absoluteLayout.Children.Add(changeBoundsButton);

// Set the Content of the page
Content = absoluteLayout;
}

void OnChangeBoundsClicked(object sender, EventArgs e)
{
AbsoluteLayout.SetLayoutBounds(rectangle, new Rect(0.5, 0.5, 100, 100));
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues;

public class Issue32042 : _IssuesUITest
{
public Issue32042(TestDevice testDevice) : base(testDevice)
{
}
public override string Issue => "Rectangle appears blurred on iOS and macOS when its bounds are changed at runtime within an AbsoluteLayout";

[Test]
[Category(UITestCategories.Shape)]
public void RectangleShouldNotBeBlurredAfterBoundsChange()
{
App.WaitForElement("Issue32042Button");
App.Tap("Issue32042Button");
VerifyScreenshot();
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/Core/src/Platform/iOS/MauiShapeView.cs
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ public class MauiShapeView : PlatformGraphicsView, IUIViewLifeCycleEvents
public MauiShapeView()
{
BackgroundColor = UIColor.Clear;
// Redraw the shape when bounds change to prevent blur during resizing in container layouts.
ContentMode = UIViewContentMode.Redraw;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mnnn, UIViewContentMode.Redraw triggers Draw(CGRect) every time bounds change, including:

  • Layout passes (multiple per frame)
  • Animations (60fps = 60 redraws/second)
  • Parent container resizing
  • Keyboard appearance/dismissal
  • Orientation changes
  • Safe area inset changes
  • ScrollView scrolling (if shape is inside)

Shape rendering is already expensive:

  • Path calculation
  • Fill rendering
  • Stroke rendering
  • Shadow/gradient effects
  • Anti-aliasing

For complex shapes (Polygon, Path with many points), this could cause performance issues. The key question is do all shapes have this blurring issue? If is only Rectangle, can move the fix to the Rectangle.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After reviewing the performance impact feedback, I’ve analyzed the issue further. The blurring occurs specifically for the Rectangle shape when its bounds are updated at runtime. To avoid performance overhead from using UIViewContentMode.Redraw, the fix has been moved out, and a workaround has been suggested in the issue report instead.
Workaround: link

}

[UnconditionalSuppressMessage("Memory", "MEM0002", Justification = IUIViewLifeCycleEvents.UnconditionalSuppressMessage)]
Expand Down