From eb42525557730765f91e051341c853c84be1d95c Mon Sep 17 00:00:00 2001 From: Jorge Cabiedes Acosta Date: Wed, 29 Oct 2025 13:35:17 -0700 Subject: [PATCH] Fix visual artifacts when sometimes using decimal assymetric borderRadii (#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 --- packages/react-native/React/Views/RCTBorderDrawing.m | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-native/React/Views/RCTBorderDrawing.m b/packages/react-native/React/Views/RCTBorderDrawing.m index 9755a2ae048732..472885ca0c39a6 100644 --- a/packages/react-native/React/Views/RCTBorderDrawing.m +++ b/packages/react-native/React/Views/RCTBorderDrawing.m @@ -247,8 +247,12 @@ static CGPathRef RCTPathCreateOuterOutline(BOOL drawToEdge, CGRect rect, RCTCorn const CGSize size = makeStretchable ? (CGSize){ // 1pt for the middle stretchable area along each axis - edgeInsets.left + 1 + edgeInsets.right, - edgeInsets.top + 1 + edgeInsets.bottom + // we also need to round the edge insets to avoid border bleeding + // this is because if the size is decimal, when calculating the unit + // rectangle for CALayer.contentsCenter we encounter rounding errors + // which causes visual glitches + ceil(edgeInsets.left) + 1 + ceil(edgeInsets.right), + ceil(edgeInsets.top) + 1 + ceil(edgeInsets.bottom), } : viewSize; UIGraphicsImageRenderer *const imageRenderer =