iOS: border width and color renders incorrectly on iOS for particular values
See original GitHub issueEnvironment
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!
Issue Analytics
- State:
- Created 5 years ago
- Reactions:16
- Comments:18 (1 by maintainers)
Top Results From Across the Web
Opaque border color on IOS is not rendered correcly
Turns out it renders border differently on IOS and Android. On IOS, background color is visible through transparent border color.
Read more >Supported CSS Properties - Apple Developer
Describes the Cascading Style Sheet (CSS) properties that are supported by Safari and WebKit.
Read more >Xamarin.Forms Frame - Microsoft Learn
BorderColor is a Color value that determines the color of the Frame border. · CornerRadius is a float value that determines the rounded...
Read more >Here's How I Solved a Weird Bug Using Tried and True ...
At first, this looks like a CSS issue. Some styles might be applied on a hover event that breaks the layout or the...
Read more >Outlook for iOS is removing padding and styling from our e-mail
So we're using XSLT to create these templates, not standard HTML/CSS. But the XSLT renders into HTML. Below is one of our templates...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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