Android: Border radius renders in a blurred / choppy way in 0.51.0

[dannycochran]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 6.11.4
Yarn: Not Found
npm: 3.10.10
Watchman: 4.9.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.53.0 => 0.53.0

Target Platform: Android (22)

Steps to Reproduce

Create a simple view:

export default class App extends Component {
 render() {
 return (
 <View style={styles.background}>
 <View style={styles.container}>
 <Text>Welcome to React Native!</Text>
 </View>
 </View>
 );
 }
}

const styles = StyleSheet.create({
 background: {
 backgroundColor: 'purple',
 flex: 1
 },
 container: {
 position: 'absolute',
 left: 100,
 top: 100,
 width: 200,
 height: 100,
 backgroundColor: 'orange',
 borderWidth: 2,
 borderColor: 'orange',
 borderRadius: 50,
 justifyContent: 'center',
 alignItems: 'center'
 }
});

Expected Behavior

I would expect that the border does not render in a strange and pixelated way. Previously in react-native 0.49.5, the exact same code would render like so:

Actual Behavior

In react-native 0.53.0, that same code renders this blurry border:

Reproducible Demo

The code snippet above compiles and should be sufficient to reproduce this problem.

[dannycochran]

Pinging @RSNara who is listed on release notes for 0.51.0 for border work, and @AaaChiuuu who worked on "overflow: hidden" for 0.50.0.

edit: this bug is not in 0.50.1, it appears first in 0.51.0 as far as I can tell.

[SirNeuman]

I've also noticed this. It's especially noticeable when you have the border color different from the background color of the button and surrounding view.

[dannycochran]

This appears to be one of a number of bugs related to borders in Android for 0.51.0:

#17286
#17251
#17224
#17144

[jkimbo]

@RSNara any update on this issue? It's currently blocking our upgrade to v0.51

[jkimbo]

Another bug related to this: #17311

[rogoja]

same problem

[dannycochran]

@RSNara are you able to take a look at this, or help us identify which commit might be responsible?

[yedidyak]

This is the android profile GPU rendering on a screen with a couple of circles with borderWidth of 1 in RN 0.51.0. The same screen renders flawlessly on lower versions of RN.

[yedidyak]

I made a PR that fixes the performance issue. The problem was that the new borders calculations didn't support a borderRadius larger than the maximum possible - 50% of the smallest side.

#17514

[atlanteh]

@yedidyak Is this the reason for all of the above bugs mentioned by @dannycochran ?
Will this PR also fix all of those as well?

[yedidyak]

It's possible, I didn't notice any specific issues as shown above, just serious performance issues. My PR is specific to borderRadius > 50% of the view size. I posted it here because it seems that several different border issues in 0.51.0 were merged into here.

[dannycochran]

Still in 0.52.0, 5aa1fb3 and ca7fe72 by @RSNara did not fix, not sure they were intended to?

[SirNeuman]

Yeah, those fixes seemed to address Android API below 18 specifically, however I'm seeing this issue on my Samsung Galaxy Tab running API 24 (Android 7.0).

For reference here is what I'm seeing:

This is with a borderWidth = 1 and a borderRadius = 5 for a touchableOpacity component, which makes it look like there are different border widths on different sides, even though they should all be the same. It also looks jagged:

This is what it looks like with borderWidth = 2 and borderRadius = 5 for the same component. It looks better for some reason:

[Luze26]

We can also see a line between each side of the border (appeared in 0.51 and still present in 0.52).