[iOS] Entry in Border - strange corner round.
See original GitHub issueDescription
<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
Issue Analytics
- State:
- Created 10 months ago
- Reactions:1
- Comments:11 (6 by maintainers)
Top Results From Across the Web
Turn off iPhone/Safari input element rounding
If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input...
Read more >iOS Safari rounded corners on input box, can't figure out ...
Kevin Korte is having issues with: Hello, so I'm finishing up launching a wordpress site, but I have this weird bug on Safari...
Read more >Strange white border around apps when using app switcher?
I have the same issue, I believe it is because the iPhone 14 screen has slightly rounder corners so some apps don't fit...
Read more >Rounded Corner Issues on iPad/iPhone (Example)
I did some research and the recommendation for the border-radius spec is to clip an image if it flows out of the border-radius...
Read more >Stop iOS styling your input fields and buttons
-webkit-appearance: none; border-radius: 0;. Now, if you are using rounded corners in your CSS then you can can leave out the border-radius selector....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

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>This should have been fixed by https://github.com/dotnet/maui/pull/10964
(sorry for the color selection, is to check easily the clipping)