Rectangle renders as thin line instead of filled shape for small height values #31330
Description
Description
When adding a Rectangle to an AbsoluteLayout in .NET MAUI, if the height is a small non-integer value (e.g., 1.2), the shape renders incorrectly as a thin stroked line instead of a filled rectangle.
However, the same size and bounds applied to a BoxView renders correctly as a filled shape.
This makes Rectangle unreliable for scenarios that require small but visible highlight regions (e.g., PDF text highlights).
Expected Behavior:
Both Rectangle and BoxView should render as fill rectangles that respect the provided width and height, regardless of whether the size is small or fractional.
Actual Behavior:
BoxView renders correctly.
Rectangle collapses into a thin line (stroke-only rendering).
This issue is reproducible on both IOS and Android.
Steps to Reproduce
- Create a new .NET MAUI app.
2.Use the below code in MainPage.xaml.cs.
3.Run the app and click the “Add Rectangle” button.
4.Observe that the red BoxView is rendered as expected, while the blue Rectangle only shows as a thin horizontal line.
public partial class MainPage : ContentPage
{
AbsoluteLayout absoluteLayout;
Grid grid;
public MainPage()
{
InitializeComponent();
var scrollView = new ScrollView
{
Orientation = ScrollOrientation.Both,
VerticalScrollBarVisibility = ScrollBarVisibility.Always,
HorizontalScrollBarVisibility = ScrollBarVisibility.Always,
};
grid = new Grid
{
WidthRequest = 3370,
HeightRequest = 2383,
BackgroundColor = Colors.LightGray
};
absoluteLayout = new AbsoluteLayout();
grid.Children.Add(absoluteLayout);
var button = new Button
{
Text = "Add Rectangle",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Start
};
button.Clicked += OnAddRectangleClicked;
var mainLayout = new Grid();
mainLayout.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
mainLayout.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
mainLayout.Children.Add(button);
Grid.SetRow(button, 0);
Grid.SetColumn(button, 0);
// Add scrollView to row 1
scrollView.Content = grid;
mainLayout.Children.Add(scrollView);
Grid.SetRow(scrollView, 1);
Grid.SetColumn(scrollView, 0);
Content = mainLayout;
}
private void OnAddRectangleClicked(object sender, EventArgs e)
{
double shapeWidth = 20;
double shapeHeight = 1.2;
// === BoxView ===
var box = new BoxView
{
BackgroundColor = Colors.Red
};
var rectBox = new Rect(
(3370 / 2) - shapeWidth - 50, // little left
(2383 / 2) - (shapeHeight / 2),
shapeWidth,
shapeHeight
);
AbsoluteLayout.SetLayoutBounds(box, rectBox);
AbsoluteLayout.SetLayoutFlags(box, AbsoluteLayoutFlags.None);
// === Rectangle ===
var rectangle = new Rectangle
{
BackgroundColor = Colors.Blue
};
var rectRectangle = new Rect(
(3370 / 2) + 50, // little right
(2383 / 2) - (shapeHeight / 2),
shapeWidth,
shapeHeight
);
AbsoluteLayout.SetLayoutBounds(rectangle, rectRectangle);
AbsoluteLayout.SetLayoutFlags(rectangle, AbsoluteLayoutFlags.None);
absoluteLayout.Children.Add(box);
absoluteLayout.Children.Add(rectangle);
}
}
}
Link to public reproduction project repository
No response
Version with bug
9.0.100 SR10
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
Android
Affected platform versions
Android 17, Pixel 7 -API 35
Did you find any workaround?
No response
Relevant log output
Please check the sample attached using Google drive
https://drive.google.com/file/d/17lllNO-JyJzA4bSjKVKQwG0PGhdFP-AT/view?usp=drive_link