Specific border radius corner causes visual bug on other corners #22511

atkinchris · 2018-12-04T16:30:34Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
  System:
    OS: macOS High Sierra 10.13.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 2.98 GB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.14.0 - ~/.nvm/versions/node/v8.14.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  SDKs:
    Android SDK:
      API Levels: 23, 27
      Build Tools: 27.0.3
  IDEs:
    Xcode: /undefined - /usr/bin/xcodebuild
  npmPackages:
    react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
    react-native: 0.57.4 => 0.57.4
  npmGlobalPackages:
    react-native-cli: 2.0.1

Description

Applying a non-zero border radius value to a specific corner when all other corners are zero, causes the other corners to become slightly curved on Android.

Reproducible Demo

Code Snippet:

<View style={{
  backgroundColor: 'red',
  width: 100,
  height: 100,
  borderWidth: 5,
  borderBottomLeftRadius: 15,
}} />
<View style={{
  backgroundColor: 'green',
  borderWidth: 5,
  width: 100,
  height: 100,
}} />

Expo Snack:

https://snack.expo.io/@atkinchris/border-radius-bug

The text was updated successfully, but these errors were encountered:

wazzupex · 2018-12-04T22:08:20Z

Hi, although it's was not supposed to happen, have you tried to set the other corners radius to 0 ?

atkinchris · 2018-12-04T23:18:31Z

@wazzupex - yep! With the below, it does not change. Setting borderRadius: 0 also does not correct it.

backgroundColor: 'red',
width: 100,
height: 100,
borderWidth: 5,
borderBottomLeftRadius: 15,
borderBottomRightRadius: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,

Interestingly, this does not present in Snack's iOS preview - only on Android and real devices.

bozhouyongqi · 2018-12-18T09:04:50Z

I faced with this problems too,when I set the borderBottomLeftRadius attribute only,it does affect other corners slightly curved.When I set the borderWidth to 1,it display ok.

simform-solutions · 2018-12-19T11:51:54Z

        borderBottomWidth: 5,
        borderTopWidth: 5,
        borderLeftWidth: 5,
        borderRightWidth: 5,

use this

jigz · 2019-01-22T10:38:12Z

is this somehow connected to my bug?

kelset · 2019-03-19T16:28:34Z

👋 everyone.

I can confirm that this bug is still present on RN 0.59 - but I investigated a bit further and I noticed that it seems to be related not strictly to the borderRadius but to the borderWidth: when it's set to 0, the bug doesn't show:

This said, we'll look more into this issue in the next few months (hopefully) - if you have more time to dedicate to it it would surely help!

(ps: @JigzPalillo it's hard to tell - probably not)

Nizarius · 2019-04-10T12:11:37Z

@kelset this bug is really annoying in my project. Let's not wait a few months:) I made PR for fixing it.

atkinchris · 2019-04-10T12:26:14Z

Succinct PR @Nizarius! I think this needs unit tests to prevent regressions.

…facebook#24390) Summary: Fixes facebook#22511 I understand the motivation of adding extraRadiusForOutline to corner radius: without it there can be an empty space between border and view's background color. So I add simple check: if corner radius is more than zero we still add extraRadiusForOutline. And if not, we don't add it to prevent all the corners to become slightly curved. [GENERAL] [Fixed] - fix of Android's bug that causes all the corners to become slightly curved if only specific corners' radius should be more than zero. Pull Request resolved: facebook#24390 Differential Revision: D14870476 Pulled By: cpojer fbshipit-source-id: df40fc584a2f8badc499413cb3c4e4d96b9e18cf

ThakurKarthik · 2019-06-30T06:28:03Z

is this somehow connected to my bug?

Is this fixed?In my case i can see background color of outer view inside a view with border radius in fractional number.

Summary: In order to properly set the view's borderRadius the inner*RadiusX/inner*RadiusY should not be used, since their values are obtained via the following formula: int innerTopLeftRadiusX = Math.max(topLeftRadius - borderWidth.left, 0); If topLeftRadius and borderWidth.left have the same value innerTopLeftRadiusX will be zero and it will cause the top left radius to never be set since "(innerTopLeftRadiusX > 0 ? extraRadiusForOutline : 0)" will evaluate to zero. In order to prevent this issue the condition will only consider topLeftRadius, topRightRadius, and etc. I took a closer look to see if this fix does not causes a regression in #22511 ## Changelog [Android] [FIX] - Correctly set the border radius on android Pull Request resolved: #25626 Test Plan: Using the following code and Android certify that the border radius is correctly applied. ```javascript import React from "react"; import { ScrollView, StyleSheet, Text, View } from "react-native"; export default class App extends React.Component<Props> { render() { return ( <ScrollView style={styles.container}> <View style={styles.box1}> <Text>borderWidth: 2</Text> <Text>borderRadius: 2</Text> </View> <View style={styles.box2}> <Text>borderWidth: 2</Text> <Text>borderRadius: 2.000001</Text> </View> <View style={styles.box3}> <Text>borderWidth: 5</Text> <Text>borderRadius: 5</Text> </View> <View style={styles.box4}> <Text>borderWidth: 5</Text> <Text>borderRadius: 5.000001</Text> </View> <View style={styles.box5}> <Text>borderWidth: 10</Text> <Text>borderRadius: 10</Text> </View> <View style={styles.box6}> <Text>borderWidth: 10</Text> <Text>borderRadius: 11</Text> </View> <View style={styles.box7}> <Text>borderWidth: 10</Text> <Text>borderRadius: 5</Text> </View> <Text>Testing if this does not cause a regression in https://github.com/facebook/react-native/issues/22511</Text> <View style={{ margin: 10, backgroundColor: 'red', width: 100, height: 100, borderWidth: 5, borderBottomLeftRadius: 15, }} /> <View style={{ margin: 10, backgroundColor: 'green', borderWidth: 5, width: 100, height: 100, }} /> </ScrollView> ); } } const styles = StyleSheet.create({ container: { flex: 1 }, box1: { margin: 10, height: 100, borderRadius: 2, borderWidth: 2, borderColor: "#000000" }, box2: { margin: 10, height: 100, borderRadius: 2.000001, borderWidth: 2, borderColor: "#000000" }, box3: { margin: 10, height: 100, borderRadius: 5, borderWidth: 5, borderColor: "#000000" }, box4: { margin: 10, height: 100, borderRadius: 5.000001, borderWidth: 5, borderColor: "#000000" }, box5: { margin: 10, height: 100, borderRadius: 10, borderWidth: 10, borderColor: "#000000" }, box6: { margin: 10, height: 100, borderRadius: 11, borderWidth: 10, borderColor: "#000000" }, box7: { margin: 10, height: 100, borderRadius: 5, borderWidth: 10, borderColor: "#000000" } }); ``` ### Without the fix ![not-working](https://user-images.githubusercontent.com/984610/61164801-e1dc6580-a4ee-11e9-91f3-6ca2fab7c461.gif) ### With the fix ![fixed](https://user-images.githubusercontent.com/984610/61164794-db4dee00-a4ee-11e9-88d7-367c29c785ec.gif) Closes #25591 Reviewed By: osdnk Differential Revision: D16243602 Pulled By: mdvacca fbshipit-source-id: 1e16572fdf6936aa19c3d4c01ff6434028652942

Summary: In order to properly set the view's borderRadius the inner*RadiusX/inner*RadiusY should not be used, since their values are obtained via the following formula: int innerTopLeftRadiusX = Math.max(topLeftRadius - borderWidth.left, 0); If topLeftRadius and borderWidth.left have the same value innerTopLeftRadiusX will be zero and it will cause the top left radius to never be set since "(innerTopLeftRadiusX > 0 ? extraRadiusForOutline : 0)" will evaluate to zero. In order to prevent this issue the condition will only consider topLeftRadius, topRightRadius, and etc. I took a closer look to see if this fix does not causes a regression in #22511 [Android] [FIX] - Correctly set the border radius on android Pull Request resolved: #25626 Test Plan: Using the following code and Android certify that the border radius is correctly applied. ```javascript import React from "react"; import { ScrollView, StyleSheet, Text, View } from "react-native"; export default class App extends React.Component<Props> { render() { return ( <ScrollView style={styles.container}> <View style={styles.box1}> <Text>borderWidth: 2</Text> <Text>borderRadius: 2</Text> </View> <View style={styles.box2}> <Text>borderWidth: 2</Text> <Text>borderRadius: 2.000001</Text> </View> <View style={styles.box3}> <Text>borderWidth: 5</Text> <Text>borderRadius: 5</Text> </View> <View style={styles.box4}> <Text>borderWidth: 5</Text> <Text>borderRadius: 5.000001</Text> </View> <View style={styles.box5}> <Text>borderWidth: 10</Text> <Text>borderRadius: 10</Text> </View> <View style={styles.box6}> <Text>borderWidth: 10</Text> <Text>borderRadius: 11</Text> </View> <View style={styles.box7}> <Text>borderWidth: 10</Text> <Text>borderRadius: 5</Text> </View> <Text>Testing if this does not cause a regression in https://github.com/facebook/react-native/issues/22511</Text> <View style={{ margin: 10, backgroundColor: 'red', width: 100, height: 100, borderWidth: 5, borderBottomLeftRadius: 15, }} /> <View style={{ margin: 10, backgroundColor: 'green', borderWidth: 5, width: 100, height: 100, }} /> </ScrollView> ); } } const styles = StyleSheet.create({ container: { flex: 1 }, box1: { margin: 10, height: 100, borderRadius: 2, borderWidth: 2, borderColor: "#000000" }, box2: { margin: 10, height: 100, borderRadius: 2.000001, borderWidth: 2, borderColor: "#000000" }, box3: { margin: 10, height: 100, borderRadius: 5, borderWidth: 5, borderColor: "#000000" }, box4: { margin: 10, height: 100, borderRadius: 5.000001, borderWidth: 5, borderColor: "#000000" }, box5: { margin: 10, height: 100, borderRadius: 10, borderWidth: 10, borderColor: "#000000" }, box6: { margin: 10, height: 100, borderRadius: 11, borderWidth: 10, borderColor: "#000000" }, box7: { margin: 10, height: 100, borderRadius: 5, borderWidth: 10, borderColor: "#000000" } }); ``` ![not-working](https://user-images.githubusercontent.com/984610/61164801-e1dc6580-a4ee-11e9-91f3-6ca2fab7c461.gif) ![fixed](https://user-images.githubusercontent.com/984610/61164794-db4dee00-a4ee-11e9-88d7-367c29c785ec.gif) Closes #25591 Reviewed By: osdnk Differential Revision: D16243602 Pulled By: mdvacca fbshipit-source-id: 1e16572fdf6936aa19c3d4c01ff6434028652942

hramos added Platform: Android Android applications. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. labels Dec 5, 2018

react-native-bot added the Bug Report label Jan 26, 2019

hramos removed the Bug Report label Feb 6, 2019

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 1 #24028

Closed

kelset added Priority: Mid Component: View labels Mar 19, 2019

Nizarius mentioned this issue Apr 10, 2019

Fix: specific border radius corner causes visual bug on other corners #24390

Closed

facebook-github-bot closed this as completed in a05b409 Apr 10, 2019

react-native-bot added the Bug label May 4, 2019

cabelitos mentioned this issue Jul 13, 2019

[Android][Fix]Properly set borderRadius on Android #25626

Closed

facebook locked as resolved and limited conversation to collaborators Apr 10, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Specific border radius corner causes visual bug on other corners #22511

Specific border radius corner causes visual bug on other corners #22511

atkinchris commented Dec 4, 2018 •

edited

Loading

wazzupex commented Dec 4, 2018

atkinchris commented Dec 4, 2018

bozhouyongqi commented Dec 18, 2018

simform-solutions commented Dec 19, 2018 •

edited

Loading

jigz commented Jan 22, 2019

kelset commented Mar 19, 2019

Nizarius commented Apr 10, 2019 •

edited

Loading

atkinchris commented Apr 10, 2019

ThakurKarthik commented Jun 30, 2019

Specific border radius corner causes visual bug on other corners #22511

Specific border radius corner causes visual bug on other corners #22511

Comments

atkinchris commented Dec 4, 2018 • edited Loading

Environment

Description

Reproducible Demo

wazzupex commented Dec 4, 2018

atkinchris commented Dec 4, 2018

bozhouyongqi commented Dec 18, 2018

simform-solutions commented Dec 19, 2018 • edited Loading

jigz commented Jan 22, 2019

kelset commented Mar 19, 2019

Nizarius commented Apr 10, 2019 • edited Loading

atkinchris commented Apr 10, 2019

ThakurKarthik commented Jun 30, 2019

atkinchris commented Dec 4, 2018 •

edited

Loading

simform-solutions commented Dec 19, 2018 •

edited

Loading

Nizarius commented Apr 10, 2019 •

edited

Loading