iOS Border crops/masks underlying elements wrong with clearly abnormal visual effect (iOS only) - repro project included

[jonmdev]

Description

When a Border in iOS is created, it does not crop/mask its nested components correctly.

Correct Behavior (Android):
Here is a simple configuration in Android rendering correctly:

Wrong Behavior (iOS):
Here it is in iOS showing clearly abnormal behavior:

In Android, the Border stroke is drawn correctly OVERTOP of the underlying/nested elements, and the alignment of the mask is correct.

In iOS, the Border stroke is drawn UNDERNEATH the nested elements, and the alignment of the mask or underlying elements is completely off.

Steps to Reproduce

1. Create a new project named "Border iOS Mask Bug"
2. Copy and paste the following to replace App.xaml.cs and play project:

using Microsoft.Maui.Controls.Shapes;

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

            ContentPage mainPage = new();
            mainPage.BackgroundColor = Colors.CornflowerBlue;
            this.MainPage = mainPage;

            VerticalStackLayout vert = new();
            mainPage.Content = vert;

            Border border = new();
            border.Stroke = Colors.White;
            border.StrokeThickness = 10;
            //border.Shadow = new Shadow() { Offset = new Point(0, 6), Radius = 7 };
            vert.Add(border);

            AbsoluteLayout abs = new();
            border.Content = abs;

            Image image = new();
            abs.Add(image);
            image.Source = ImageSource.FromResource("Border_iOS_Mask_Bug.Resources.Images.cat.jpg");
            image.Aspect = Aspect.AspectFill;

            //resize function
            mainPage.SizeChanged += delegate {
                if (mainPage.Width > 0) {
                    int width = (int)mainPage.Width ;
                    border.WidthRequest = border.HeightRequest = width * 0.5;
                    image.WidthRequest = image.HeightRequest = width * 0.5;
                    border.StrokeShape = new RoundRectangle() { CornerRadius = width * 0.25 };
                }
            };
        }
    }
}

Link to public reproduction project repository

https://github.com/jonmdev/Border-iOS-Mask-Bug

Version with bug

7.0.96

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[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.

[jonmdev]

Thank you. You are correct. It works fine in .NET 8.0. No bug.