[Bug] Strange Border with StrokeThickness and Clipped Content

[Phenek]

Description

Hello,

Borders StrokeThickness does not have the same width between iOS and Android.

Android seems to not have a perfect interior line rounded
iOS seems ok, but it put an extract padding on the left image

PS: Right Image has a negative padding to see the clip issue, but it's a known issue #7576 #6986
--------------------------Android------------------------------------------------------------ iOS-------------------------

Steps to Reproduce

1. Create a new Border
2. Put as a Content a Grid with some stuff in it (Images ,etc..)
3. Use a RoundRectangle as Border.StrokeShape with different CornerRadius to see the result.

--------------------------iOS------------------------------------------- Android-------------------------

                <Border StrokeThickness="20"
                        Stroke="Silver"
                        Background="White"
                        Margin="0"
                        Padding="0">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="30" />
                    </Border.StrokeShape>
                    <Grid HeightRequest="30" BackgroundColor="Green">
                        <StackLayout Orientation="Horizontal">
                            <Frame Padding="0" HasShadow="false"
                                   BackgroundColor="Maroon"
                                   CornerRadius="20"
                                   HeightRequest="40"
                                   WidthRequest="40" VerticalOptions="Center" >
                            </Frame>
                            <Label Text="Parameters"
                                   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                                   FontSize="Medium" FontFamily="Bold"
                                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                            <Frame Padding="0" HasShadow="false" CornerRadius="0" Margin="0,0,-20,0"
                                   BackgroundColor="Blue"
                                   HeightRequest="40"
                                   WidthRequest="40" VerticalOptions="Center" >
                            </Frame>
                        </StackLayout>
                    </Grid>
                </Border>

Expected Behavior

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

MAUI 6.0.312

Did you find any workaround?

No response

Relevant log output

No response

[kristinx0211]

@Phenek thanks for your report, could you provide a sample project/screenshots or more details that we can reproduce your issue? That should greatly speed up the process, thanks!

[ghost]

Hi @Phenek. 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.

[Phenek]

Hello,

I updated the issue I provide you the Xaml sample.
No need an entire project, just copy and past

                <Border StrokeThickness="20"
                        Stroke="Silver"
                        Background="White"
                        Margin="0"
                        Padding="0">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="30" />
                    </Border.StrokeShape>
                    <Grid HeightRequest="30" BackgroundColor="Green">
                        <StackLayout Orientation="Horizontal">
                            <Frame Padding="0" HasShadow="false"
                                   BackgroundColor="Maroon"
                                   CornerRadius="20"
                                   HeightRequest="40"
                                   WidthRequest="40" VerticalOptions="Center" >
                            </Frame>
                            <Label Text="Parameters"
                                   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                                   FontSize="Medium" FontFamily="Bold"
                                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                            <Frame Padding="0" HasShadow="false" CornerRadius="0" Margin="0,0,-20,0"
                                   BackgroundColor="Blue"
                                   HeightRequest="40"
                                   WidthRequest="40" VerticalOptions="Center" >
                            </Frame>
                        </StackLayout>
                    </Grid>
                </Border>

-------------------------iOS------------------------------------------------------Android--------------------

[kristinx0211]

can be reproduced on android with above code.

[jsuarezruiz]

Tried with the latest version and the result on Android is the following:

Is the expected one right?. On iOS the current version is not clipping the content, have been fixed by #7335 and will be available in the upcoming version.

[ghost]

Hi @Phenek. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. 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.

[Phenek]

@jsuarezruiz Glad to see that coming!

I see you choose an inside border that overlap the content.
I think it's the best compromise, it let us the choise to make a padding on the content of the size of the border or as we wish.

But we still have a little issue, I just removed the green background and found this on Android,
I don't know if it's the clip or the border that has the wrong StrokeThickness, but they should follow each other
---------------------------------Android-----------------------------------

We are not so far from the perfect behavior!

I am unable to test iOS, because Maui App crash at startup, I will try next time.

                <Border StrokeThickness="10"
                        Stroke="Silver"
                        Background="White"
                        Margin="0"
                        Padding="0"
                        HeightRequest="60">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="30" />
                    </Border.StrokeShape>
                    <Grid HeightRequest="30">
                        <StackLayout Orientation="Horizontal" HeightRequest="30">
                            <Frame Padding="0" HasShadow="false"
                                   BackgroundColor="Maroon"
                                   CornerRadius="20"
                                   HeightRequest="40"
                                   WidthRequest="40" VerticalOptions="Center" >
                            </Frame>
                            <Label Text="Parameters"
                                   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                                   FontSize="Medium" FontFamily="Bold"
                                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                            <Frame Padding="0" HasShadow="false" CornerRadius="0"
                                   BackgroundColor="Blue"
                                   HeightRequest="40"
                                   WidthRequest="40" VerticalOptions="Center" >
                            </Frame>
                        </StackLayout>
                    </Grid>
                </Border>

[Phenek]

@jsuarezruiz So here a little update on the issue,
this is inside a StackLayout with 0 spacing.
---------------------------iOS--------------------------|-----------------------Android---------------------

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.