Nested Borders misbehave on iOS

[FreakyAli]

Description

When you nest 2 Border controls on iOS the inner one of the two gets cut off, this only happens when you try to create a circular border, either using an Ellipse or a Rounded rectangle, the same works flawlessly on Android.

When you try to create a Circular shape on the outer Border, the inner border will get cut off, Added screenshots below for Android and iOS:

iOS	Android

Notice how as soon as the outer Border is a Circle, the inner border gets distorted.

Steps to Reproduce

Go to the below repository and run it and you will have all you need on the home screen itself but just in case i am adding a piece of code that replicates the issue in multiple different ways:

<Border HeightRequest="100" WidthRequest="100">
            <Border.StrokeShape>
                <Ellipse/>
            </Border.StrokeShape>
            <Border HeightRequest="50" WidthRequest="50">
                <Border.StrokeShape>
                    <Ellipse/>
                </Border.StrokeShape>
            </Border>
        </Border>

        <Border HeightRequest="100" WidthRequest="100">
            <Border.StrokeShape>
                <RoundRectangle/>
            </Border.StrokeShape>
            <Border>
                <Border.StrokeShape>
                    <Ellipse/>
                </Border.StrokeShape>
            </Border>
        </Border>

        <Border HeightRequest="100" WidthRequest="100">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="50"/>
            </Border.StrokeShape>
            <Border HeightRequest="50" WidthRequest="50">
                <Border.StrokeShape>
                    <Ellipse/>
                </Border.StrokeShape>
            </Border>
        </Border>

        <Border HeightRequest="100" WidthRequest="100">
            <Border.StrokeShape>
                <RoundRectangle/>
            </Border.StrokeShape>
            <Border>
                <Border.StrokeShape>
                    <Ellipse/>
                </Border.StrokeShape>
            </Border>
        </Border>

Link to public reproduction project repository

https://github.com/FreakyAli/Maui.FreakyControls/tree/entry_issue

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4

Did you find any workaround?

No, if you do, kindly let me know!

Relevant log output

NA

[ghost]

Hi @FreakyAli. 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]

On .NET 8 RC1, on Windows need to set the Stroke color to draw the border.

[FreakyAli]

@jsuarezruiz unfortunately I don't have access to RC-1 so I cannot confirm this, I tried downloading it on my VS Mac but my VS stopped running on Android all together right now I am reinstalling VS Mac. Is this some known issue?

Btw it is not running on Android for both .Net 7 and 8 once I installed .Net 8 RC1

[FreakyAli]

This is working with .NET 8 and hence I am closing this thanks!