Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
GlacierFox opened this issue Jan 25, 2024 · 6 comments · Fixed by #21197
Closed

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

GlacierFox opened this issue Jan 25, 2024 · 6 comments · Fixed by #21197
Assignees
Labels
area-controls-border Border area-drawing Shapes, Borders, Shadows, Graphics, BoxView, custom drawing fixed-in-8.0.60 fixed-in-9.0.0-preview.5.24307.10 platform/android 🤖 s/needs-attention Issue has more information and needs another look s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone

Comments

@GlacierFox
Copy link

GlacierFox commented Jan 25, 2024

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 GlacierFox added the t/bug Something isn't working label Jan 25, 2024
@samhouts samhouts added the area-drawing Shapes, Borders, Shadows, Graphics, BoxView, custom drawing label Jan 25, 2024
@PureWeen PureWeen added the s/needs-repro Attach a solution or code which reproduces the issue label Jan 25, 2024
@ghost
Copy link

ghost commented Jan 25, 2024

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.

@JohnHDev
Copy link

JohnHDev commented Jan 25, 2024

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.

@ghost ghost added s/needs-attention Issue has more information and needs another look and removed s/needs-repro Attach a solution or code which reproduces the issue labels Jan 25, 2024
@GlacierFox
Copy link
Author

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
Copy link
Author

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.

@ghost ghost added the legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor label Jan 26, 2024
@PureWeen PureWeen added this to the Backlog milestone Jan 26, 2024
@ghost
Copy link

ghost commented Jan 26, 2024

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.

@XamlTest
Copy link

XamlTest commented Mar 7, 2024

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 XamlTest added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Mar 7, 2024
kubaflo added a commit to kubaflo/maui that referenced this issue Mar 13, 2024
kubaflo added a commit to kubaflo/maui that referenced this issue Mar 13, 2024
kubaflo added a commit to kubaflo/maui that referenced this issue Mar 14, 2024
kubaflo added a commit to kubaflo/maui that referenced this issue Mar 14, 2024
@PureWeen PureWeen modified the milestones: Backlog, .NET 8 SR5 Apr 12, 2024
@PureWeen PureWeen moved this from Todo to Possible in MAUI SDK Ongoing Apr 24, 2024
@PureWeen PureWeen modified the milestones: .NET 8 SR5, .NET 8 SR6 Apr 25, 2024
@Eilon Eilon removed the legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor label May 10, 2024
mattleibow added a commit that referenced this issue May 14, 2024
…et to 0 - fix (#21197)

* Added a UI Test (#20156)

* Fixed border thickness (#20156)

* Update Border.cs

* Added snapshots

* windows needs a interactable control

* pictures

---------

Co-authored-by: Javier Suárez <javiersuarezruiz@hotmail.com>
Co-authored-by: Matthew Leibowitz <mattleibow@live.com>
@github-project-automation github-project-automation bot moved this from Possible to Done in MAUI SDK Ongoing May 14, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Jun 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-controls-border Border area-drawing Shapes, Borders, Shadows, Graphics, BoxView, custom drawing fixed-in-8.0.60 fixed-in-9.0.0-preview.5.24307.10 platform/android 🤖 s/needs-attention Issue has more information and needs another look s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

8 participants