From 6f875b2eb7bca0077f6d255865c9d7868376251f Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Fri, 26 Feb 2021 18:49:50 +0100 Subject: [PATCH] fix: safeguards against invalid values --- packages/core/ui/styling/background.ios.ts | 16 +++++++++++++--- packages/core/ui/styling/css-shadow.ts | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts index 82f22183d..dab5be7b2 100644 --- a/packages/core/ui/styling/background.ios.ts +++ b/packages/core/ui/styling/background.ios.ts @@ -733,15 +733,25 @@ function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: CSSShadow, } // shadow opacity is handled on the shadow's color instance layer.shadowOpacity = boxShadow.color?.a ? boxShadow.color?.a / 255 : 1; - layer.shadowRadius = Length.toDevicePixels(boxShadow.blurRadius); + layer.shadowRadius = Length.toDevicePixels(boxShadow.blurRadius, 0.0); layer.shadowColor = boxShadow.color.ios.CGColor; - layer.shadowOffset = CGSizeMake(Length.toDevicePixels(boxShadow.offsetX), Length.toDevicePixels(boxShadow.offsetY)); + + // prettier-ignore + layer.shadowOffset = CGSizeMake( + Length.toDevicePixels(boxShadow.offsetX, 0.0), + Length.toDevicePixels(boxShadow.offsetY, 0.0) + ); // this should match the view's border radius const cornerRadius = Length.toDevicePixels(view.style.borderRadius); // apply spreadRadius by expanding shadow layer bounds - const bounds = boxShadow.spreadRadius ? CGRectInset(nativeView.bounds, -Length.toDevicePixels(boxShadow.spreadRadius), -Length.toDevicePixels(boxShadow.spreadRadius)) : nativeView.bounds; + // prettier-ignore + const bounds = boxShadow.spreadRadius ? + CGRectInset(nativeView.bounds, + -Length.toDevicePixels(boxShadow.spreadRadius), + -Length.toDevicePixels(boxShadow.spreadRadius) + ) : nativeView.bounds; // This has the nice glow with box shadow of 0,0 layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(bounds, cornerRadius).CGPath; diff --git a/packages/core/ui/styling/css-shadow.ts b/packages/core/ui/styling/css-shadow.ts index 645d87913..515b31a1e 100644 --- a/packages/core/ui/styling/css-shadow.ts +++ b/packages/core/ui/styling/css-shadow.ts @@ -34,7 +34,7 @@ const isLength = (v) => v === '0' || LENGTH_RE.test(v); * @param value */ export function parseCSSShadow(value: string): CSSShadow { - const parts = value.split(PARTS_RE); + const parts = value.trim().split(PARTS_RE); const inset = parts.includes('inset'); const first = parts[0]; const last = parts[parts.length - 1];