Clipping issues for Border control (all platforms, but different on each platform) #18893
Labels
area-controls-border
Border
area-drawing
Shapes, Borders, Shadows, Graphics, BoxView, custom drawing
platform/android 🤖
platform/iOS 🍎
platform/windows 🪟
t/bug
Something isn't working
Milestone
Description
The content inside a Border control is not correctly clipped. It's an issue on all platforms, but Android is the worst.
The following screenshots show a 160x160 box with on each corner a 32x32 box with different border sizes. The 32x32 boxes in the corners are there to illustrate the clipping that is occurring and to verify the border width.
Android:
![image](https://private-user-images.githubusercontent.com/650710/284101431-70f7d607-5258-43da-ba9f-4791aebee930.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjkwNDM4MTEsIm5iZiI6MTcyOTA0MzUxMSwicGF0aCI6Ii82NTA3MTAvMjg0MTAxNDMxLTcwZjdkNjA3LTUyNTgtNDNkYS1iYTlmLTQ3OTFhZWJlZTkzMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAxNlQwMTUxNTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kYTY1ODU0MTM0MDkzOWFlYzM1N2U0ZGVhYjc1N2MwNWI2MTgwNWUyZDNiYzc4N2E3ZmQ0MTliNzFkZDNkMDAwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.sdLWbwh7cobodxlePlh5hrZYzPVV10PLMamGgSv3Yac)
iOS:
![IMG_0012](https://private-user-images.githubusercontent.com/650710/284101489-26c06c3d-b05e-40ae-b39b-b0badb971615.PNG?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjkwNDM4MTEsIm5iZiI6MTcyOTA0MzUxMSwicGF0aCI6Ii82NTA3MTAvMjg0MTAxNDg5LTI2YzA2YzNkLWIwNWUtNDBhZS1iMzliLWIwYmFkYjk3MTYxNS5QTkc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAxNlQwMTUxNTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xYTFiZWQyNjYyMDBlMmJmYmE1YzI2M2FjZTk2ZGVhN2E4ZGJjZmYzMjFhYzBmNTk0MmY4ODY0MTc3MDZjZGNiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.xd4OjmwPO4HFK2a7jmCePzfCym8ACsjCqSbFjPYoJsU)
Windows:
![](https://private-user-images.githubusercontent.com/650710/284101530-c9f63f41-59c4-4f53-a933-6f0f625ec008.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjkwNDM4MTEsIm5iZiI6MTcyOTA0MzUxMSwicGF0aCI6Ii82NTA3MTAvMjg0MTAxNTMwLWM5ZjYzZjQxLTU5YzQtNGY1My1hOTMzLTZmMGY2MjVlYzAwOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAxNlQwMTUxNTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yZDBjMDk5YTgwZWE1NWY3ZGM0NTEyNTJlMmVhZTBkYjFmNDJjNmFiNjE4NzZiYjc2ODAxN2EyYTc0NTgyOTBiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.uFgun_LtOGl7sCD8hOLJ7XRHPrnLrjqVr0yabyt-yjY)
On Android, the inside content is cutting through the outline border.
On iOS, the content is clipped using an incorrect radius on the round corners. There's white space showing
On Windows, the same issue as on iOS (incorrect radius used for clipping). But also, the outside edge of square corners is not rendered correctly
I haven't tested on MacOS
Note that this was a LOT worse on MAUI 7, so it's not a regression.
The XAML for what is shown in the screenshot:
Steps to Reproduce
No response
Link to public reproduction project repository
https://github.com/activa/MauiBorderClippingBug
Version with bug
8.0.3
Is this a regression from previous behavior?
No, this is something new
Last version that worked well
Unknown/Other
Affected platforms
iOS, Android, Windows
Affected platform versions
No response
Did you find any workaround?
No response
Relevant log output
No response
The text was updated successfully, but these errors were encountered: