fix(ios): anti-aliasing for accurate borders (NativeScript#10619)

CatchABus · web-flow · commit 4f46815b27cc · 2024-10-31T09:16:44.000-07:00
diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts
@@ -725,20 +725,15 @@ function calculateNonUniformBorderCappedRadii(bounds: CGRect, background: Backgr
 
 function drawNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition): void {
 	const layer: CALayer = nativeView.layer;
-	// There are some cases like drawing when Core Animation API has trouble with fractional coordinates,
-	// so get the difference between the fractional and integral origin points and use it as offset
-	const { x: frameX, y: frameY } = layer.frame.origin;
-	const offsetX = Math.round(frameX) - frameX;
-	const offsetY = Math.round(frameY) - frameY;
-	const drawingBounds = CGRectOffset(layer.bounds, offsetX, offsetY);
+	const layerBounds = layer.bounds;
 
 	layer.borderColor = null;
 	layer.borderWidth = 0;
 	layer.cornerRadius = 0;
 
-	const cappedOuterRadii = calculateNonUniformBorderCappedRadii(drawingBounds, background);
+	const cappedOuterRadii = calculateNonUniformBorderCappedRadii(layerBounds, background);
 	if (nativeView.maskType === iosViewUtils.LayerMask.BORDER && layer.mask instanceof CAShapeLayer) {
-		layer.mask.path = generateNonUniformBorderOuterClipPath(drawingBounds, cappedOuterRadii);
+		layer.mask.path = generateNonUniformBorderOuterClipPath(layerBounds, cappedOuterRadii);
 	}
 
 	if (background.hasBorderWidth()) {
@@ -750,15 +745,21 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
 		}
 
 		if (background.hasUniformBorderColor()) {
+			// Use anti-aliasing or borders will draw incorrectly at times
+			nativeView.borderLayer.shouldRasterize = true;
+			nativeView.borderLayer.rasterizationScale = Screen.mainScreen.scale;
 			nativeView.borderLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
-			nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
+			nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
 		} else {
 			// Non-uniform borders need more layers in order to display multiple colors at the same time
 			let borderTopLayer, borderRightLayer, borderBottomLayer, borderLeftLayer;
 
 			if (!nativeView.hasNonUniformBorderColor) {
 				const maskLayer = CAShapeLayer.new();
 				maskLayer.fillRule = kCAFillRuleEvenOdd;
+				// Use anti-aliasing or borders will draw incorrectly at times
+				maskLayer.shouldRasterize = true;
+				maskLayer.rasterizationScale = Screen.mainScreen.scale;
 				nativeView.borderLayer.mask = maskLayer;
 
 				borderTopLayer = CAShapeLayer.new();
@@ -779,7 +780,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
 				borderLeftLayer = nativeView.borderLayer.sublayers[3];
 			}
 
-			const paths = generateNonUniformMultiColorBorderPaths(drawingBounds, background);
+			const paths = generateNonUniformMultiColorBorderPaths(layerBounds, background);
 
 			borderTopLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
 			borderTopLayer.path = paths[0];
@@ -792,7 +793,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
 
 			// Clip inner area to create borders
 			if (nativeView.borderLayer.mask instanceof CAShapeLayer) {
-				nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
+				nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
 			}
 		}
 	}
