Rectangle renders as thin line instead of filled shape for small height values
- Dominant language
- C#
- Stars
- 23.3k
- Forks
- 2k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 290
Description
[RectangleView.zip](https://github.com/user-attachments/files/22108964/RectangleView.zip)
### 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
1. 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.
```csharp
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
```shell
```
Please check the sample attached using Google drive
https://drive.google.com/file/d/17lllNO-JyJzA4bSjKVKQwG0PGhdFP-AT/view?usp=drive_link
Contributor guide
Research direction
Start with the reproduction in MainPage.xaml.cs and the attached RectangleView.zip, using the 1.2 height and comparing Rectangle with BoxView. Reproduce on Android and check the reported iOS behavior; the issue is done when Rectangle renders as a filled shape with small fractional dimensions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, csharp, ios
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100