[Borders] Halo shows through rounded borders

[ide]

If you have a view with a background color that is different than the border's color, the background color seeps through the rounded borders.

Repro:

  <Text style={styles.marker}>1</Text>

  marker: {
    color: 'white',
    backgroundColor: 'blue',
    width: 17,
    height: 17,
    lineHeight: 15,
    borderWidth: 1.5,
    borderColor: 'white',
    borderRadius: 17 / 2,
    overflow: 'hidden',
  }

[sahrens]

As far as I can tell this is just an iOS bug - do you know if there is much we can do about it besides custom drawing? We're already doing come custom drawing for multiple border radii so more custom drawing isn't out of the question.

cc @a2, @nicklockwood

On Jul 16, 2015, at 6:12 AM, James Ide notifications@github.com wrote:

If you have a view with a background color that is different than the border's color, the background color seeps through the rounded borders.

Repro:

1

marker: {
color: 'white',
backgroundColor: 'blue',
width: 17,
height: 17,
lineHeight: 15,
borderWidth: 1.5,
borderColor: 'white',
borderRadius: 17 / 2,
overflow: 'hidden',
}
—
Reply to this email directly or view it on GitHub.

[nicklockwood]

Yeah, we still need to fix a few bugs in the border drawing to make it behave more like CSS. I can't tell at a glance whether it's using standard iOS drawing in this case, or our custom implementation, though I'd assume it's the former since the radii are equal.

[sahrens]

We've had this problem since before the custom borders so I'm pretty sure it's just an iOS thing.

On Jul 16, 2015, at 1:19 PM, Nick Lockwood notifications@github.com wrote:

Yeah, we still need to fix a few bugs in the border drawing to make it behave more like CSS. I can't tell at a glance whether it's using standard iOS drawing in this case, or our custom implementation, though I'd assume it's the former since the radii are equal.

—
Reply to this email directly or view it on GitHub.

[ide]

Yeah, this is iOS's rendering. Unfortunately it repros on iOS 9b3 as well.

[admmasters]

I guess we should file a radar with Apple, in this case. Presumably as iOS9 is believed to be a bug fixing type update, its a good time for things like this to be addressed. Maybe I'm expecting too much :-D

[grabbou]

BTW, can this be related somehow to #1870 ?

[ide]

@grabbou This issue is different and has to do with Apple's implementation of cornerRadius.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/borders-halo-shows-through-rounded-borders-

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[nikoloza]

The same issue here. Problem with borderWidth + borderRadius rendering:

[nikoloza]

Actually, using boxShadows instead of border did the great workaround.