Skip to content

iOS: border width and color renders incorrectly on iOS for particular values #21945

Closed
@rroehrig

Description

@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:
bildschirmfoto 2018-10-25 um 14 13 08

Expected:
bildschirmfoto 2018-10-25 um 14 11 23

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugPlatform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions