New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dannycochran opened this Issue Dec 19, 2017 · 56 comments

Comments

Projects
None yet
@dannycochran
Copy link
Contributor

dannycochran commented Dec 19, 2017

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:

screen shot 2017-12-18 at 5 16 14 pm

Actual Behavior

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

screen shot 2017-12-18 at 5 15 54 pm

Reproducible Demo

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

@dannycochran

This comment has been minimized.

Copy link
Contributor

dannycochran commented Dec 19, 2017

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

This comment has been minimized.

Copy link

SirNeuman commented Dec 19, 2017

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 comment has been minimized.

Copy link
Contributor

dannycochran commented Dec 20, 2017

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

#17286
#17251
#17224
#17144

@jkimbo

This comment has been minimized.

Copy link
Contributor

jkimbo commented Dec 22, 2017

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

@jkimbo

This comment has been minimized.

Copy link
Contributor

jkimbo commented Dec 22, 2017

Another bug related to this: #17311

@rogoja

This comment has been minimized.

Copy link

rogoja commented Dec 22, 2017

same problem

@dannycochran

This comment has been minimized.

Copy link
Contributor

dannycochran commented Jan 4, 2018

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

@yedidyak

This comment has been minimized.

Copy link
Contributor

yedidyak commented Jan 8, 2018

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.

screenshot_1515418843

@yedidyak

This comment has been minimized.

Copy link
Contributor

yedidyak commented Jan 10, 2018

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

This comment has been minimized.

Copy link
Contributor

atlanteh commented Jan 11, 2018

@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

This comment has been minimized.

Copy link
Contributor

yedidyak commented Jan 11, 2018

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

This comment has been minimized.

Copy link
Contributor

dannycochran commented Jan 19, 2018

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

@SirNeuman

This comment has been minimized.

Copy link

SirNeuman commented Jan 22, 2018

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:
screenshot_20180122-115133

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

@Luze26

This comment has been minimized.

Copy link

Luze26 commented Jan 25, 2018

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

@sandropoluan

This comment has been minimized.

Copy link

sandropoluan commented Feb 6, 2018

This issue still exist on RN 0.53

@jamesloper

This comment has been minimized.

Copy link

jamesloper commented Feb 9, 2018

Here's a snack to help clarify the rendering issue:

https://snack.expo.io/BytwPGarz

  • Only affects 24 and 25.
  • I tried on a Note 8 a Galaxy S8, and reproduced the same as the image, using 24 and 25.
  • On a Moto G (3rd gen), and a Galaxy J9, the rendering is also off in 24 and 25, but its a lot less noticeable due to the low resolution of the screens.
  • On the Moto G the borders looked the best. Probably because the physical screen is a perfect multiple of whatever the density-independent screen is being used in react native. Still, though, the borderRadius has aliasing, but it’s like, sloppy aliasing? Rounding errors?







import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>Pushy Pushy</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    backgroundColor: '#fff',
    padding: 10,
  },
  button: {
    borderRadius: 2,
    borderColor: 'red',
    borderWidth: 1,
    padding: 10,
  },
  buttonText: {
    fontSize: 16,
    textAlign: 'center',
  },
});
@atlanteh

This comment has been minimized.

Copy link
Contributor

atlanteh commented Feb 10, 2018

@hramos
Guys, how can you release new versions of react-native with such a bug? This issue has been reported almost two months ago and should have been address almost instantly. It there anyone on this?

@jwesselink

This comment has been minimized.

Copy link

jwesselink commented Feb 11, 2018

This bug prevents me from updating to newer react native versions (0.50.4 is the latest working version). This bug is still present in the latest 0.52 release.

I use the border radius to draw radio buttons (https://github.com/jwesselink/react-native-material-kit#radio-button) but they appear as a filled circle on my android phone (s5 mini) since the 0.51 release

@hramos

This comment has been minimized.

Copy link
Contributor

hramos commented Feb 16, 2018

@atlanteh the release schedule is fixed, and unless tests are broken, the release will go out.

I'm not sure what you mean by "address almost instantly" -- this is a GitHub issue, not a pull request. We rely on contributors from the community to help address any issues that affect them.

@atlanteh

This comment has been minimized.

Copy link
Contributor

atlanteh commented Feb 17, 2018

@hramos I understand that, but fact is, that border radius doesn't work on latest releases. Someone broke it few releases ago and for some reason nobody cares. This means there's no test coverage on border radius? Almost no one uses it?

@RSNara

This comment has been minimized.

Copy link
Contributor

RSNara commented Feb 17, 2018

Sorry for not getting to this earlier. But it seems like the calculations in ReactViewBackgroundDrawable.drawRoundedBackgroundWithBorders might be a bit off. That's just a hunch though. Regardless, the problem should be in ReactViewBackgroundDrawable, since that's the class we use to do border drawing in Android.

Unfortunately, I'm a bit swamped with work, so I can't guarantee that I'll get to this fix anytime soon. This comment explains how rounded borders work. It shouldn't be too difficult to understand. So, I'd love it if someone else could take a crack at it.

@Annihil

This comment has been minimized.

Copy link

Annihil commented Feb 21, 2018

The border radii work perfect on Android, but it's just completely aliased unfortunately (whereas antialiased on iOS) (RN .53)

ART.Shape does not suffer from aliasing tho

Edit: After some tests, I found that it only happens when borderWidth & borderColor are specified, radii are antialiased with backgroundColor.

@react-native-bot

This comment has been minimized.

Copy link
Collaborator

react-native-bot commented Feb 24, 2018

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to ContributeWhat to Expect from Maintainers

@sandropoluan

This comment has been minimized.

Copy link

sandropoluan commented Feb 24, 2018

@react-native-bot why is this closed? I'm use v0.53.0 and and still having this problem.

@thangkho

This comment has been minimized.

Copy link

thangkho commented Mar 21, 2018

when I test with old vesion RN 0.49 it working perfect.
<TouchableOpacity style= {{ width: 300, height: 100, borderRadius: 50, borderWidth: 2, borderColor: 'red' }}> </TouchableOpacity>

@alansainz

This comment has been minimized.

Copy link

alansainz commented Apr 3, 2018

Has anyone found a workaround for this?

@itchingpixels

This comment has been minimized.

Copy link

itchingpixels commented Apr 7, 2018

This is currently blocking us as well.

@Rah1x

This comment has been minimized.

Copy link

Rah1x commented Apr 11, 2018

I cant believe its not resolved in all this time.. sick n tired of bloody RN programming half the month I just spend fixing and upgrading dependencies!

@Rah1x

This comment has been minimized.

Copy link

Rah1x commented Apr 11, 2018

So I couldnt install my old RN app due to this issue:
#6692

So I had to upgrade RN to another version and try again. Now ive this issue of borderradius. So now ive 2 issues - whats the point of upgrade!

@Rah1x

This comment has been minimized.

Copy link

Rah1x commented Apr 19, 2018

Still not fixed:

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ^0.55.3 => 0.55.3

@iamdurui

This comment has been minimized.

Copy link

iamdurui commented Apr 24, 2018

Still not fixed:
react-native: ^0.55.3 => 0.55.3
It is my code

立即申请

sButton: {
alignItems: 'center',
justifyContent: 'center',
height: 36,
borderColor: '#fff',
marginTop: 18,
width: Dimensions.get('window').width - 180,
borderWidth:2,
borderTopRightRadius:10
},
lText: {
fontSize: 16,
color: '#fff',
},
first , I run this code at android 4.3(Coolpad 5200s)
default
second ,I run this code at android 7.0(HUAWEI P9)
14_53_35__04_24_2018

@himabindugadupudi

This comment has been minimized.

Copy link
Contributor

himabindugadupudi commented Apr 24, 2018

Fixed with commit c5ca26a which is now in Master. Please test with Master build.

@Rah1x

This comment has been minimized.

Copy link

Rah1x commented Apr 26, 2018

@himabindugadupudi Thanks for getting it fixed
However I manage my system via react-native-git-upgrade X.Y and your commit is not part of any release yet.
https://github.com/facebook/react-native/releases

Can you or someone set it to a release plz?
Thanks a lot

@TheSavior

This comment has been minimized.

Copy link
Member

TheSavior commented Apr 26, 2018

@Rah1x, it will be part of the April release.

@newyankeecodeshop

This comment has been minimized.

Copy link
Contributor

newyankeecodeshop commented Apr 26, 2018

@TheSavior This is great news. Given the severity of this, any chance we can get that commit cherry-picked into 0.55 as well?

@TheSavior

This comment has been minimized.

Copy link
Member

TheSavior commented Apr 26, 2018

It seems like we are pretty close to 0.56 and this bug has existed for many releases. I’ll leave it up to @grabbou to decide on whether it should be cherry picked.

@Rah1x

This comment has been minimized.

Copy link

Rah1x commented May 1, 2018

I see the new release 0.55.4 at
https://github.com/facebook/react-native/releases
I hope that includes this fix.

However since im using react-native-git-upgrade I cant seem to upgrade. This is what I get when I run it

git-upgrade ERR! Error: The specified version of React Native 0.55.4 doesn't exist

@atlanteh

This comment has been minimized.

Copy link
Contributor

atlanteh commented May 1, 2018

React Native 55.4 doesn't include this fix. It probably only includes a cherry-pick or two of critical bugs that couldn't wait until next release.
As much as I want this bug fixed, it's not considered critical.

@yakirbu

This comment has been minimized.

Copy link

yakirbu commented Jun 10, 2018

@atlanteh
How isn't it considered critical?
An app UI that is mostly designed with border-radius items will have all its views pixelated.

I hope it will be added to the next release.

@atlanteh

This comment has been minimized.

Copy link
Contributor

atlanteh commented Jun 10, 2018

Since this bug has been discovered quite few releases ago and not fixed until now, it's no longer critical. If it was discovered just after cutting a release, I think it would qualify as critical and a new hotfix would be released, but after so long, it's no longer urgent enough

@TheSavior

This comment has been minimized.

Copy link
Member

TheSavior commented Jun 10, 2018

I'm not sure that critical vs non-critical really matters at this point. This issue has been fixed but we haven't had a release since then. This fix will be in the next release.

@JasperVercammen

This comment has been minimized.

Copy link

JasperVercammen commented Jun 10, 2018

When is the next release planned? Because we would really like to include this in our release, but we're waiting for 2 months on a new release.

@atlanteh

This comment has been minimized.

Copy link
Contributor

atlanteh commented Jun 10, 2018

Should be any moment, the release was delayed due to tests failing and there's already a PR fixing them.
See here: #19625

@Rah1x

This comment was marked as disruptive content.

Copy link

Rah1x commented Jun 11, 2018

Thats why ive given up on RN altogether.. In all the years of development, ive never seen a system full of silly bugs such as the border blurr and that couldnt get resolved only to tell you the list of enormous bugs they mustbe fixing elsewhere. Just call it BugNative instead of ReactNative!

@jamesloper

This comment was marked as off-topic.

Copy link

jamesloper commented Jun 12, 2018

I was the lead developer for 7 months during a huge app build. We had quite an incredible product in my eyes. In the end we decided to scrap it because it was taking too many resources on our company. Right before we were winding down and returning to more pressing development matters, we noticed the bug. We tried to handle it internally but on the next release, our lead disigner popped in and cursed because everything looked ffffed up. At that moment we threw in the towel and gave up on react native even though the project was still technically ongoing. If our company had decided to continue working on that project, to this day we would still not be hearing the end of it from our disgruntled designer who rightfully so thought we can't do simple tasks like draw a rounded rectangle or have two 1px borders have equal width. I'm distanced from the effects this bug reaps because I haven't touched react native in so long and the cancellation of the project coinsided with the release that introduced this bug but can not see how this bug never sounded major alarms. Side note react native was a blast to use otherwise and we considered it to be a very production ready library. Expo was incredible.

@hramos

This comment has been minimized.

Copy link
Contributor

hramos commented Jun 12, 2018

This fix is now part of the latest release candidate: https://github.com/facebook/react-native/releases/tag/v0.56.0-rc

The schedule is meant to provide a reasonably stable release every month or so, but there's nothing preventing anyone from using React Native from master. In the future, you can take advantage of any fixes-in-master-but-not-yet-in-a-release by using React Native from master or pinning your react-native package to the commit that introduced the fix.

I'd also like to take the opportunity to remind everyone that this repo abides to the following Code of Conduct: https://github.com/facebook/react-native/blob/master/CODE_OF_CONDUCT.md. Maintainers will hide comments from first offenders, and they reserve the right to block repeat offenders.

@facebook facebook locked as resolved and limited conversation to collaborators Jun 12, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.