Skip to content

RN 0.57.3 breaks CSS triangles on iOS #22824

@lfkwtz

Description

@lfkwtz

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 191.33 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
      Yarn: 1.12.3 - ~/.yarn/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 28
        Build Tools: 28.0.3
        System Images: android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

#21208 breaks CSS triangles created via borders in iOS

RN 0.57.3
simulator screen shot - iphone x - 2018-12-28 at 15 34 44

RN 0.57.2
simulator screen shot - iphone x - 2018-12-28 at 15 37 03

Reproducible Demo

        <View
          style={{
            backgroundColor: "transparent",
            borderBottomWidth: 80,
            borderBottomColor: "gray",
            borderRightWidth: 80,
            borderRightColor: "transparent",
            borderLeftWidth: 80,
            borderLeftColor: "transparent",
            width: 0,
            height: 0
          }}
        />
        <View
          style={{
            backgroundColor: "transparent",
            borderLeftWidth: 80,
            borderLeftColor: "gray",
            borderTopWidth: 80,
            borderTopColor: "transparent",
            borderBottomWidth: 80,
            borderBottomColor: "transparent",
            width: 0,
            height: 0
          }}
        />
        <View
          style={{
            backgroundColor: "transparent",
            borderTopWidth: 80,
            borderTopColor: "gray",
            borderRightWidth: 80,
            borderRightColor: "transparent",
            borderLeftWidth: 80,
            borderLeftColor: "transparent",
            width: 0,
            height: 0
          }}
        />
        <View
          style={{
            backgroundColor: "transparent",
            borderRightWidth: 80,
            borderRightColor: "gray",
            borderTopWidth: 80,
            borderTopColor: "transparent",
            borderBottomWidth: 80,
            borderBottomColor: "transparent",
            width: 0,
            height: 0
          }}
        />

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions