dotnet / dotnet/maui

Rectangle renders as thin line instead of filled shape for small height values

Open
#31,330 6 comments 0 reactions 0 assignees View on GitHub
area-drawing partner/syncfusion platform/android s/triaged s/verified t/bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.