Skip to content

Fix visual artifacts when sometimes using decimal assymetric borderRadii#54237

Closed
jorge-cab wants to merge 1 commit into
react:mainfrom
jorge-cab:export-D85260693
Closed

Fix visual artifacts when sometimes using decimal assymetric borderRadii#54237
jorge-cab wants to merge 1 commit into
react:mainfrom
jorge-cab:export-D85260693

Conversation

@jorge-cab

@jorge-cab jorge-cab commented Oct 23, 2025

Copy link
Copy Markdown
Contributor

Summary:
Before we were adding a single pixel for the stretchable area. in RCTViewComponentView we calculate what percentage is 1 pixel from the entire image to create the unit rectangle:

    CGRect contentsCenter = CGRect{
        CGPoint{imageCapInsets.left / imageSize.width, imageCapInsets.top / imageSize.height},
        CGSize{(CGFloat)1.0 / imageSize.width, (CGFloat)1.0 / imageSize.height}};

However sometimes when dividing 1.0 / imageSize.width we would get a big enough float that causes a rounding error essentially having part of the border bleed into the stretchable region.

The easiest way to fix this is give the stretchable region a little more space so to prevent the bleeding.

We can do this by just making the border image's width and height into integers by rounding the edgeInsets.

The alternative is some shockingly complex math to appropriately calculate the most convenient stretchable area size

Differential Revision: D85260693

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 23, 2025
@meta-codesync

meta-codesync Bot commented Oct 23, 2025

Copy link
Copy Markdown

@jorge-cab has exported this pull request. If you are a Meta employee, you can view the originating Diff in D85260693.

…dii (react#54237)

Summary:

Before we were adding a single pixel for the stretchable area. in RCTViewComponentView we calculate what percentage is 1 pixel from the entire image to create the unit rectangle:
```
    CGRect contentsCenter = CGRect{
        CGPoint{imageCapInsets.left / imageSize.width, imageCapInsets.top / imageSize.height},
        CGSize{(CGFloat)1.0 / imageSize.width, (CGFloat)1.0 / imageSize.height}};
``` 

However sometimes when dividing `1.0 / imageSize.width` we would get a big enough float that causes a rounding error essentially having part of the border bleed into the stretchable region.

The easiest way to fix this is give the stretchable region a little more space so to prevent the bleeding. 

We can do this by rounding the edgeInsets that give the border area its size

The alternative is some shockingly complex math to appropriately calculate the most convenient stretchable area size

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D85260693
@meta-codesync

meta-codesync Bot commented Oct 30, 2025

Copy link
Copy Markdown

This pull request has been merged in d0015e0.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Oct 30, 2025
@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @jorge-cab in d0015e0

When will my fix make it into a release? | How to file a pick request?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants