[iOS] Entry in Border - strange corner round.

[KSemenenko]

Description

 <VerticalStackLayout>
        <Label Text="Input" x:Name="InputLabel" Style="{StaticResource InputLabelStyle}"/>
        
        <Border Stroke="{StaticResource BackgroundOutline}" StrokeThickness="1" HeightRequest="52" >
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="16" />
            </Border.StrokeShape>
            <Entry x:Name="InputContext" BackgroundColor="{StaticResource BackgroundLight}" Placeholder="Placeholder text" 
                          Margin="8"/> 
        </Border>
       
        <Label Text="Error" x:Name="Error" Style="{StaticResource InputErrorLabelStyle}"/>
    </VerticalStackLayout>

left top corner of Entry is rounded. but why?

Steps to Reproduce

try to do

 <VerticalStackLayout>
        <Label Text="Input" x:Name="InputLabel" Style="{StaticResource InputLabelStyle}"/>
        
        <Border Stroke="{StaticResource BackgroundOutline}" StrokeThickness="1" HeightRequest="52" >
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="16" />
            </Border.StrokeShape>
            <Entry x:Name="InputContext" BackgroundColor="{StaticResource BackgroundLight}" Placeholder="Placeholder text" 
                          Margin="8"/> 
        </Border>
       
        <Label Text="Error" x:Name="Error" Style="{StaticResource InputErrorLabelStyle}"/>
    </VerticalStackLayout>

Link to public reproduction project repository

no

Version with bug

7.0 Release Candidate 2

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16

Did you find any workaround?

No response

Relevant log output

No response

[KSemenenko]

also looks like Border is not trim control

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

[MGohil]

Similar issue I came across. Works good in Android but iOS gives strange behaviour with upper left corner. Clipping my content.

[KSemenenko]

Is there any idea how I can fix that behavior? Now it’s blocker for my next app release

[breenbob]

Also having this issue. In my specific circumstance adding more padding to inner element allowed it to "escape" the clipping that occurs. Would rather it was fixed!

[breenbob]

Also, I was seeing this behaviour on WinUI too. In Image below the white element is the Border control and it is the only control with rounded corners set on it, with a RoundRectangle StrokeShape. Removing this shape removes rounded corners on both the white element and the teal element.

[faheys]

A possible workaround is to wrap the child of the border element in another border element that is not rounded. E.g. <Border x:Name="RoundedCornerBorder"> <!--Wrap children in another transparent border to workaround iOS render bug--> <Border StrokeShape="Rectangle" StrokeThickness="0" BackgroundColor="Transparent"> <!-- Child goes here --> </Border> </Border>

[jkhoel]

I was having the same issue and the solution was to ensure that the clipped element has a height. So if you added a HeightRequest to the HorizontalStackLayout in @MGohil 's screenshot, then that would probably fix it.

I think what is happening is that the shape we add to StrokeShape acts as a clipping mask. We would expect this mask to be perfectly aligned with the Border element, but it looks like moves if no children defines a height.

[FM1973]

Both workarounds do not work for me. Please fix it.

[jinxinjuan]

Verified this issue with Visual Studio 17.7.0 Preview 1.0. Can repro on iOS platform with project MauiApp2.zip

[jsuarezruiz]

also looks like Border is not trim control

This should have been fixed by https://github.com/dotnet/maui/pull/10964 (sorry for the color selection, is to check easily the clipping)