Border color bleeding bug when border radius is set.

As you can see in the picture, border colors are bleeding when borderRadius is set. It only happens when I use corner border radius such as borderBottomLeftRadius, borderBottomRightRadius.

Here’s style for the node:

    borderWidth: StyleSheet.hairlineWidth,
    borderRightWidth: StyleSheet.hairlineWidth,
    borderBottomWidth: 2 * StyleSheet.hairlineWidth,
    borderColor: colors.itemBorder,
    borderRightColor: '#bbbcbd',
    borderBottomColor: '#bbbcbd',
    borderBottomLeftRadius: 4,
    borderBottomRightRadius: 4,
    overflow: 'hidden',

I’ve tried with different colors and it still happens.

Tested both on iOS simulator and real device iPhone 6 Plus. Same bug. Haven’t tested on Android.

[jevakallio]

There was an issue https://github.com/facebook/react-native/issues/6082 that was closed by @lacker for lack of reproducible example.

Here’s a minimal repro on RNPlay: https://rnplay.org/apps/XiWz1g - It appears this issue happens when you provide border radius to some corners, but not all. Affects iOS only.

[thomasobrien99]

+1 to this issue, screenshot from iPhone 6. Style for node is: scaleLevels: { backgroundColor: colors.deepSkyBlue1, borderColor: colors.deepSkyBlue1, borderRadius: dimensions.borderRadius, // 4 borderWidth: dimensions.borderWidth, // 1 flexDirection: ‘row’ }, scaleLevel: { alignItems: ‘center’, borderColor: colors.deepSkyBlue1, borderLeftWidth: dimensions.borderWidth // 1, flex: 1, height: dimensions.scaleLevelHeight, justifyContent: ‘center’ }, scaleLevelFirst: { borderBottomLeftRadius: 3, borderLeftWidth: 0, borderTopLeftRadius: 3 }, scaleLevelLast: { borderBottomRightRadius: 3, borderTopRightRadius: 3 }