react-native: iOS: border width and color renders incorrectly on iOS for particular values
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!
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 16
- Comments: 18 (1 by maintainers)
Commits related to this issue
- Fix artifacting on RN-drawn borders with asymmetric radii (#21208) Summary: This PR fixes an obscure rendering bug on iOS for borders with asymmetric radii. It appears to be a problem with the custom... — committed to facebook/react-native by jamesreggio 6 years ago
- Fix triangle views on iOS (#23402) Summary: Fixes #22824 #21945 , the bug comes from #21208 , it was to fix #11897. Now Let's constrain edge adjust only when view has corners. [iOS] [Fixed] - Fix tr... — committed to facebook/react-native by zhongwuzw 5 years ago
- Fix triangle views on iOS (#23402) Summary: Fixes #22824 #21945 , the bug comes from #21208 , it was to fix #11897. Now Let's constrain edge adjust only when view has corners. [iOS] [Fixed] - Fix tr... — committed to facebook/react-native by zhongwuzw 5 years ago
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:
Hope this helps some of you!
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
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!