From c16095ed854bae561849cce7844a97da6eec82be Mon Sep 17 00:00:00 2001 From: Nick Lockwood Date: Fri, 8 Jan 2016 16:14:20 -0800 Subject: [PATCH] Fixed border collapse bug Summary: public The fix for border smearing introduced a bug where borders + background would sometimes not be rendered if the view was created at a small size (e.g. zero) and then resized. This diff fixes that by redrawing the border if the view size changes. There is some opportunity to optimize this in future by performing some logic up-front to detect if the redrawing is necessary, but I thought I'd keep it simple for this bug fix rather than risk introducing further bugs. Reviewed By: jingc Differential Revision: D2817365 fb-gh-sync-id: eca164e8ce03a66598677c9e05496791230b5210 --- React/Views/RCTView.m | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index 9b35bbe4f..7c773691e 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -486,10 +486,10 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:unused) // Get scale factors required to prevent radii from overlapping const CGSize size = self.bounds.size; - const CGFloat topScaleFactor = MIN(1, size.width / (topLeftRadius + topRightRadius)); - const CGFloat bottomScaleFactor = MIN(1, size.width / (bottomLeftRadius + bottomRightRadius)); - const CGFloat rightScaleFactor = MIN(1, size.height / (topRightRadius + bottomRightRadius)); - const CGFloat leftScaleFactor = MIN(1, size.height / (topLeftRadius + bottomLeftRadius)); + const CGFloat topScaleFactor = RCTZeroIfNaN(MIN(1, size.width / (topLeftRadius + topRightRadius))); + const CGFloat bottomScaleFactor = RCTZeroIfNaN(MIN(1, size.width / (bottomLeftRadius + bottomRightRadius))); + const CGFloat rightScaleFactor = RCTZeroIfNaN(MIN(1, size.height / (topRightRadius + bottomRightRadius))); + const CGFloat leftScaleFactor = RCTZeroIfNaN(MIN(1, size.height / (topLeftRadius + bottomLeftRadius))); // Return scaled radii return (RCTCornerRadii){ @@ -510,6 +510,15 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:unused) }; } +- (void)reactSetFrame:(CGRect)frame +{ + // If frame is zero, or below the threshold where the border radii can + // be rendered as a stretchable image, we'll need to re-render. + // TODO: detect up-front if re-rendering is necessary + [super reactSetFrame:frame]; + [self.layer setNeedsDisplay]; +} + - (void)displayLayer:(CALayer *)layer { if (CGSizeEqualToSize(layer.bounds.size, CGSizeZero)) {