Nested Border renders top left corner bizarrely wrong with truncation in iOS/Windows (okay in Android)

[jonmdev]

Description

If you nest two Border objects so one contains the other, and the outer Border object is set as a Rounded Rectangle, it will truncate the top left corner of the inner Border object in a bizarre fashion in Windows and iOS (while rendering correctly without this truncation on Android).

In Android, correct behavior is seen as follows with the demo code given. An outer dark blue background Border with rounded corners encircles an inner white background Border with no corner rounding and both are rendered correctly:

If the inner Border is set to round its corners in the proportional amount, you get a nice smooth and symmetrical effect:

However, in iOS and Windows, when the outer Border is set to rounded corners and the inner is not, you get a bizarre truncation of the top left corner of the inner Border:

And when you set the inner Border to proportionately round off, this truncation remains on the top left corner, preventing a truly smooth/symmetrical effect:

CONSEQUENCES

• This issue is preventing appropriate rendering of any layouts using Borders and rounded corners in iOS/Windows.

Steps to Reproduce

1. Create a blank MAUI project in Visual Studio 2022 with .NET 7.0 by File > New named "Border Corner Bug"

2. Copy and paste the following code to completely replace the default code of App.xaml.cs:

using Microsoft.Maui.Controls.Shapes;

namespace Border_Corner_Bug {
    public partial class App : Application {
        public App() {
            InitializeComponent();

            MainPage = new ContentPage();
            VerticalStackLayout vert = new();
            (MainPage as ContentPage).Content = vert;

            Border border = new();
            border.StyleId = "OUTER BORDER";
            border.BackgroundColor = Colors.DarkBlue;
            border.Padding = new Thickness(10);
            border.Margin = 0;
            border.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(30), StrokeThickness = 0 };
            vert.Children.Add(border);

            Border innerBorder = new();
            innerBorder.StyleId = "INNER BORDER";
            innerBorder.HeightRequest = 60;
            innerBorder.BackgroundColor = Colors.White;
            //innerBorder.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(20), StrokeThickness = 0 };
            innerBorder.Padding = 0;
            innerBorder.Margin = 0;
            border.Content = innerBorder;
        }
    }
}

3. Run project in iOS and Windows to see the left top corner of the inner white Border is bizarrely rounded/truncated as shown in pictures above.

4. Run project in Android to see the left top corner of the inner Border is properly rendered by comparison without truncation.

Link to public reproduction project repository

https://github.com/jonmdev/Border-Corner-Bug

Version with bug

7.0.92 & 8.0

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

iOS 16.7, Android, Windows 10

Did you find any workaround?

None.

Relevant log output

No response

[ghost]

Hi @jonmdev. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[drasticactions]

If you can turn the code you posted above into a repro project, that will make it easier for anyone who wants to take a look at this to be able to debug it and have a shared codebase with you to work with.

Also, if you can separate out the issues you are hitting into individual ones, that would be great. It's easier to fix issues if they're self contained on their own (and easy to group together later if they're caused by the same thing in the end) rather than trying to fix multiple issues within the same one. Thank you!

[FreakyAli]

Seems to be related to #17753

[jonmdev]

I am not sure why a GitHub repro project would be requested when I have already provided the simple code needed to reproduce it. The project can be reproduced in two steps:

1. File New to create new Maui .NET 7.0 project named "Border Corner Bug" in Visual Studio 2022.
2. Select all of the default App.xaml.cs and copy/paste my code to replace it.

There is no other step? It takes less than 1 minute to reproduce. (?) I can do it in about 10 seconds. (?) There are only ~40 lines of code to repro.

I will remove the bounds issue and repost that in another thread as suggested. Thanks for any help.

[jonmdev]

Broke up the report into two reports. Second report for bounds issue moved here: #17763

Thanks again.

[ghost]

Hi @jonmdev. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[jsuarezruiz]

Testing with latest .NET 8 version.

Android

Windows

[jonmdev]

I tried .NET 8.0 and it provides the same result. Here it is in Windows:

It is truncating the top left in a bizarre fashion which it should not be doing (no rounding is applied to the inner border in my project code by default).

Here it is in Android where it is rendering correctly - ie. Not truncating the inner Border corners, same as on .NET 7:

Here are my project settings in .NET 8.0 Visual Studio 2022 Preview - selected target as attached:

On a possibly unrelated issue, I notice when I try to use .NET 8.0 my Android project drop downs no longer allow me to select a target android framework - the list goes empty. Is that normal? I have API 33 and 34 installed.

In terms of this issue, there is no difference between .NET 7.0 and .NET 8.0. Unless I am missing something in how to upgrade.

Is there some other step I need to take to upgrade to .NET 8.0? Besides opening the same project in Visual Studio 2022 preview with .NET 8.0 selected as target in project settings?

[jonmdev]

I posted demo code here though it is just verbatim my OP post code as described so anyone who wants to test it can see for themselves also if that is easier:

https://github.com/jonmdev/Border-Corner-Bug

[jonmdev]

Can confirm this is now working in 8.0.0-rc.2.23479.6 for Windows/iOS/Android.

Closing.