Fixes UI glitch when drawing selective corners with borderRadius

[mattijsf]

Fixes #11897

On devices (not simulator) running iOS 11 there seems to be a bug when drawing selective borders with a corner radius. A "bleeding" line appears on corners that don't have a radius while an adjacent corner has.

It’s most likely a bug with iOS 11 itself as the original code is according to spec and it works fine in an iOS 11 simulator. However it turns out that this patch is a workaround for this problem.

This patch increases the stretchable area to 2pt instead of 1pt after which the glitch disappears. I assume shouldn’t have a negative performance impact as it also enforces resizingMode UIImageResizingModeStretch.

In all fairness, though this workaround seems to have a positive impact on the bug, the exact reason why some cap inset areas are partially stretched across the resizable area remains unknown to me.

Screenshots:

The screenshots below are created using an iPhone 5s Device (e.g. in simulator the bug doesn't manifest):

From left to right:

• Raw resizable image that React Native uses to render the borders. Where I added:
  • Blue lines for debugging to indicate the corners (cap insets) of the image that are supposed to be unchanged when resized
  • Green pixels that indicate stretchable content area
• How the image is resized in the actual rendered view (with the blue lines for debugging)
• How the image is resized in the actual rendered view (without the blue lines for debugging)

Before fix:

After fix:

As you can see, there is still some bleeding happening but not in the final result.

Test Plan

See #11897 (comment)

Release Notes

[IOS] [BUGFIX] [View] - Fixes bleeding corner borders on iOS 11 devices

[mattijsf]

@sophiebits Can you help reviewing this? Or do you know someone who can?

[hramos]

Which devices have you tested this on? Might want to ensure it works as expected on @1x, @2x, and @3x devices.

[mattijsf]

I already tested it on a iPhone 5 and 5s, I just also tested on a iPhone 7 plus and iPhone X and it works. However, on these 3x devices the glitch never manifested but at least I can confirm that everything still works as expected on these devices.

I'm not sure how to test 1x though... I might have to get my hands on an 1st gen iPad mini which runs iOS 9 and has a screen scale of 1x.

Screenshots

iPhone 7+:

iPhone X:

[hramos]

Approved. Please rebase in order to take care of the test failures. They're unrelated to your diff, but rebasing should bring them back to green on this PR.

[mattijsf]

Done. Tests are passing again.

[jamesreggio]

Hey @mattijsf — @hramos would like us to coordinate to determine which of our fixes to accept. (Mine is over in #21208.)

Are there are test cases you're aware of where your approach does not properly address the issue?

[mattijsf]

Sorry @jamesreggio I didn't have the test readily available for re-creating the "intermediate"-state images that I used for my PR. But I think your PR has a proper solution compared to the workaround I used in my PR.

Nice work! 👍 Good to see that it landed in master now!