Applying a border radius to a view breaks zIndex

[jbcullis]

trafficstars

Problem Description

When a view has a child view that is absolute and can sit outside of the parent view, if the parent view has borderRadius set then the child view loses the ability to float outside of the parent view.

Steps To Reproduce

Create a view with a border radius and then inside that view, create an element with an absolute position that should sit outside of the parent view. Something like the following:

<View style={{borderRadius: 10}}>
    <View style={{position: 'absolute', top: -20}}></View>
</View>

Workaround:

<View style={{height: 10, borderTopLeftRadius: 10, borderTopRightRadius: 10}}></View>
<View style=={{flex: 1}}>
    <View style={{position: 'absolute', top: -20}}></View>
</View>
<View style={{height: 10, borderBottomLeftRadius: 10, borderBottomRightRadius: 10}}></View>

Expected Results

Child element with absolute positioning should be able to float outside of the parent regardless of if the parent has a radius or not.

CLI version

npx react-native --version

Environment

OS: Windows 10 10.0.22000
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 21.85 GB / 31.73 GB
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22000.0
IDEs:
Android Studio: Not Found
Visual Studio: 17.0.31912.275 (Visual Studio Community 2022)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.0 => 0.66.0
react-native-windows: 0.66.5 => 0.66.5
npmGlobalPackages:
react-native: Not Found

Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

No response

Build Configuration

No response

Snack, code example, screenshot, or link to a repository

No response

[chrisglein]

Adding a border causes RNW to emit more XAML elements, and there seems to be some interaction here between placement outside of the parent and the impact of the border radius. Needs investigation as to where this fails in layout.

[rozele]

IIRC, I think the XAML CornerRadius prop applies a custom clip path, which forces the effective equivalent of overflow: hidden. There are other issues with the borderRadius implementation as well (#8420).