React-native: iOS: border width and color renders incorrectly on iOS for particular values

[rroehrig]

Environment

  React Native Environment Info:
    System:
      OS: macOS Sierra 10.12.6
      CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
      Memory: 38.27 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.3 - /usr/local/opt/node@8/bin/node
      Yarn: yarn install v0.27.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 31.83s. - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/opt/node@8/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
      Android SDK:
        Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3
        API Levels: 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 9.2/9C40b - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
      react-native: 0.57.3 => 0.57.3 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

I have a triangle build with View and styles only. It renders incorrectly depending on the width/height values on iOS. The problem occurred after upgrading to react-native 0.57.3 (from 0.55.x).

Actual:

Expected:

Reproducible Demo

The following snippet is not working (tested with iPhone 6 Plus and iPhone X):

<View style={{
                width: 0,
                height: 0,
                backgroundColor: 'transparent',
                borderStyle: 'solid',
                borderTopWidth: 0,
                borderRightWidth: 82.4,
                borderBottomWidth: 82.4,
                borderLeftWidth: 0,
                borderTopColor: 'transparent',
                borderRightColor: 'red',
                borderBottomColor: 'transparent',
                borderLeftColor: 'transparent',
            }}
            />

The following snippet is working:

<View style={{
                width: 0,
                height: 0,
                backgroundColor: 'transparent',
                borderStyle: 'solid',
                borderTopWidth: 0,
                borderRightWidth: 82.5,
                borderBottomWidth: 82.5,
                borderLeftWidth: 0,
                borderTopColor: 'transparent',
                borderRightColor: 'red',
                borderBottomColor: 'transparent',
                borderLeftColor: 'transparent',
            }}
            />

It's just an example, there are much more values showing the problem!

[mezod]

Very same issue occurring here. Upgrading from 0.55 to 0.57.4.

         borderTopWidth: 40,
         borderRightWidth: 0,
         borderBottomWidth: 0,
         borderLeftWidth: 60,
         borderTopColor: 'transparent',
         borderRightColor: 'transparent',
         borderBottomColor: 'transparent',
         borderLeftColor: this.props.color,

[ddesvillechabrol]

Hello,

I had the same issue with react-native 0.57.4 and I deleted this commit https://github.com/facebook/react-native/commit/dba2235d95e46514206bcfaefc7e965193536fe8 to retrieve my triangles.

Dimitri

[mezod]

Hey Dimitri! Thanks! By deleting the commit you mean you forked react-native or just changed it in your node_modules while you wait for an upgrade? (i'm not fond of any of both solutions that's why I'm asking :P)

[ddesvillechabrol]

Hey ! Yeah I forked react-native repo and I added a commit to undo changes 😄

[michaelknoch]

I rewrote my triangles to use transforms today. Maybe the comment "// Asymmetrical edgeInsets cause strange artifacting on iOS 10 and earlier." makes sense

[mezod]

@michaelknoch care to share an example of how you implement triangles now? :P

[angelos3lex]

Any workaround on this guys?

[FadiAboMsalam]

any solution for this guys ?

[jamesreggio]

Ah, yikes. @t-benze is right: the regression occurred in a fix I made for another border issue.

Here's the original issue: #11897
Here's my PR with justification: #21208

There was another suggested fix in this PR: #19451

I would suggest that you try incorporating the patch from #19451 and see if it regresses the border-triangle functionality. If it doesn't, open a PR to revert my change (dba2235d) and include the other fix from #19451.

Sorry about this!

[csath]

#19451 patch didn't work for me. I reverted the (dba2235) commit and now it works as previously.

[FadiAboMsalam]

is this fixed in react-native 0.58.3 ?
any suggestion how to fix ?

[rpavlovs]

This changes breaks semi-circles as well.

Before:

After:

Manually patching to revert the change fixes the issue.

23402 Didn't help since it only disables if for hasCornerRadii which we need to set.

What's the best course of actions to fix this?

[johman10]

I have found a fix for the triangle issue. Adding a border radius of any value bigger than 0 seems to fix the issue for now without reverting any commit.

Complete styles that work for me:

borderTopWidth: 0,
borderRightWidth: 50,
borderBottomWidth: 50,
borderLeftWidth: 0,
borderTopColor: 'transparent',
borderRightColor: 'red',
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRadius: 0.000001,

| without borderRadius | with borderRadius |
| --- | --- |
| | |

Hope this helps some of you!

[mezod]

After having fixed the issue using borderRadius: 0.000001, the error started appearing again randomly (some triangles would appear cut while some others not) setting a bigger borderRadius made the trick, so borderRadius: 1, works better

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[mezod]

This issue still exists. Using a borderRadius: 0.000001 doesn't work in a few cases still and using borderRadius: 1 works for 95% of the cases but the triangles still appear cut in some older devices like iPad Mini.

On the other hand, increasing borderRadius removes a pixel from the opposite edge as shown here:

It's barely perceptible and not a big deal, but perceptible enough for people to notice.

Ultimately, using borderRadius feels hacky.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.