diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts index 8aa34e0c74..5069286c03 100644 --- 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,8 +745,11 @@ 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; @@ -759,6 +757,9 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg 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); } } }