maui icon indicating copy to clipboard operation
maui copied to clipboard

Border has a 1 pixel thickness even when it's thickness property is set to 0.

Open GlacierFox opened this issue 7 months ago • 6 comments

Description

I've got two labels in a vertical stack layout surround by a border so I can round the corners. If you look on the right of the image, the yellow and blue labels have a tiny gap in between which I can't seem to get rid of. The same can be seen between the purple and green.

1

If I remove the border the gap goes away. Here's the XAML of the right-hand VerticalStackLayout with the yellow and blue labels inside.

       <VerticalStackLayout Grid.Column="1"
                            Spacing="0"
                            >
           <Border StrokeThickness="0"
                   Margin="5,5,5,0"
                   Padding="0"
                   >
               <Border.StrokeShape>
                   <RoundRectangle CornerRadius="3,3,0,0" />
               </Border.StrokeShape>
               <Label BackgroundColor="{StaticResource Secondary}"
                      HeightRequest="30"
                      HorizontalOptions="Fill" />
           </Border>
           <Border StrokeThickness="0"
                   Margin="5,0,5,5"
                   Padding="0">
               <Border.StrokeShape>
                   <RoundRectangle CornerRadius="0,0,0,0" />
               </Border.StrokeShape>
               <Label BackgroundColor="{StaticResource Tertiary}"
                      HeightRequest="30"
                      HorizontalOptions="Fill" />
               
           </Border>
       </VerticalStackLayout>

Surprisingly, if I was to change the Border StrokeThickness to any value e.g. 2 and change it back to 0 with hot-reload enabled, the gap will close and look normal as you can see on the right (blue and yellow labels).

2

Unfortunately as soon as I restart my app or start debugging again and reload, the gap comes back.


Steps to Reproduce

1- Create a VerticalStackLayout and put a view in there like a Label surrounded by a border. 2- Set the stroke thickness to 0 and notice that there's still a tiny gap in between.

Link to public reproduction project repository

Border Error Repo

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 14 API 34

Did you find any workaround?

No.

Relevant log output

No response

GlacierFox avatar Jan 25 '24 13:01 GlacierFox

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

ghost avatar Jan 25 '24 19:01 ghost

Im seeing the same issue on iOS, Border appears to have an extra 1px margin in some/all circumstances. Im pretty sure I posted this issue a year or so ago, but haven't really used Maui again until recently.

EDIT: In fact I definitely did post about this, I remember looking at screenshots created by MS tester that said it didn't have the problem, but it did when you zoomed in, you could see the 1px border that shouldn't be there.

Anyway, for now Ive switched back to Frame, its ok for my immediate needs.

JohnHDev avatar Jan 25 '24 20:01 JohnHDev

Hi @GlacierFox. We have added the "s/needs-repro" ..............

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.

Here's simple starter project which shows the error.

Border Error

GlacierFox avatar Jan 25 '24 21:01 GlacierFox

Im seeing the same issue on iOS, Border appears to have an extra 1px margin in some/all circumstances. Im pretty sure I posted this issue a year or so ago, but haven't really used Maui again until recently.

EDIT: In fact I definitely did post about this, I remember looking at screenshots created by MS tester that said it didn't have the problem, but it did when you zoomed in, you could see the 1px border that shouldn't be there.

Anyway, for now Ive switched back to Frame, its ok for my immediate needs.

I've had to do the same for the time being. I hadn't really noticed it until I recently had to have two items lie flush with eachother. #7764 seems to be an old version of the problem that seems like it was fixed and then broke again.

GlacierFox avatar Jan 25 '24 21:01 GlacierFox

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

ghost avatar Jan 26 '24 15:01 ghost

Verified this on VS 17.10.0 Preview 1.0(8.0.6). Repro on Windows 11, Android 14.0-API34, iOS 17.2 and MacCatalyst with below Project: BorderThickness.zip image

XamlTest avatar Mar 07 '24 09:03 XamlTest