[iOS] Strange gradient appears when using `borderTopLeftRadius` (or similar) inside a scaled `View`

[chriscoomber]

Description

See snack reproduction: https://snack.expo.dev/@whiteroseeducation/ios-bordertopleftradius-gradient-issue

The issue only appears on iOS devices.

When two conditions are met, you see weird gradients near the corners. These conditions are:

1. The View has style which sets the border corners to different radius values, e.g. with borderTopLeftRadius.
2. The View is nested in a View which has a shrinking scale transform.

E.g.

<View
  style={{
    width: 400,
    height: 400,
    transform: [{ scale: 0.5 }],
  }}>
  <View
    style={{
      width: '100%',
      height: '100%',
      backgroundColor: 'white',
      borderColor: 'navy',
      borderWidth: 8,
      borderTopLeftRadius: 40,
    }}
  />
</View>

Steps to reproduce

1. Click snack link above
2. Run on an iOS device or simulator
3. Observe that the first shape (labelled "The issue") has weird gradients in it, which aren't specified by its style

React Native Version

0.76.7

Affected Platforms

Runtime - iOS

Reproducer

https://snack.expo.dev/@whiteroseeducation/ios-bordertopleftradius-gradient-issue

Screenshots and Videos

[sarthak-d11]

I was able to reproduce this issue on iOS only. The issue occurs on both architectures, including the New Architecture and the Old Architecture.

Android is working fine for me for both architectures