From 9e6522374bc605bb1a92ff02842878ace35e9f3d Mon Sep 17 00:00:00 2001 From: James Reggio Date: Mon, 1 Oct 2018 12:38:37 -0700 Subject: [PATCH] Fix artifacting on RN-drawn borders with asymmetric radii (#21208) Summary: This PR fixes an obscure rendering bug on iOS for borders with asymmetric radii. It appears to be a problem with the custom drawing that React Native performs when it cannot use native UIKit/CoreAnimation border drawing. Pull Request resolved: https://github.com/facebook/react-native/pull/21208 Differential Revision: D10130120 Pulled By: hramos fbshipit-source-id: d9fbc5c622c060db15658d038a068216b47bb26d --- React/Views/RCTBorderDrawing.m | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/React/Views/RCTBorderDrawing.m b/React/Views/RCTBorderDrawing.m index b008dd05bf40f3..2a8d105471aa2a 100644 --- a/React/Views/RCTBorderDrawing.m +++ b/React/Views/RCTBorderDrawing.m @@ -217,13 +217,21 @@ static CGContextRef RCTUIGraphicsBeginImageContext(CGSize size, CGColorRef backg (borderInsets.top + cornerInsets.topRight.height + borderInsets.bottom + cornerInsets.bottomLeft.height <= viewSize.height); - const UIEdgeInsets edgeInsets = (UIEdgeInsets){ + UIEdgeInsets edgeInsets = (UIEdgeInsets){ borderInsets.top + MAX(cornerInsets.topLeft.height, cornerInsets.topRight.height), borderInsets.left + MAX(cornerInsets.topLeft.width, cornerInsets.bottomLeft.width), borderInsets.bottom + MAX(cornerInsets.bottomLeft.height, cornerInsets.bottomRight.height), borderInsets.right + MAX(cornerInsets.bottomRight.width, cornerInsets.topRight.width) }; + // Asymmetrical edgeInsets cause strange artifacting on iOS 10 and earlier. + edgeInsets = (UIEdgeInsets){ + MAX(edgeInsets.top, edgeInsets.bottom), + MAX(edgeInsets.left, edgeInsets.right), + MAX(edgeInsets.top, edgeInsets.bottom), + MAX(edgeInsets.left, edgeInsets.right), + }; + const CGSize size = makeStretchable ? (CGSize){ // 1pt for the middle stretchable area along each axis edgeInsets.left + 1 + edgeInsets.right,