question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[iOS] Entry in Border - strange corner round.

See original GitHub issue

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>
Screenshot 2022-11-07 at 18 19 01

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:closed
  • Created 10 months ago
  • Reactions:1
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
faheyscommented, Mar 14, 2023

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>

2reactions
jsuarezruizcommented, Jun 15, 2023
Screenshot 2022-11-07 at 18 33 20

also looks like Border is not trim control

This should have been fixed by https://github.com/dotnet/maui/pull/10964 Captura de pantalla 2023-06-15 a las 14 03 31 (sorry for the color selection, is to check easily the clipping)

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found