React-native-web: z-index stacking context issues

[JakeCoxon]

In react native every view creates a stacking context but in react native web, it obviously follows the browsers default rules.

I have an issue in my app that I've distilled to a jsbin -> https://jsbin.com/bimoyib/edit?html,css,output

The issue is that container1 should create its own stacking context, and the z-index of every child within that container should have no effect outside of it. So since the blue box is after container1, it should appear above it.

We could fix this issue by making all Views have z-index: 0; by default. This makes all views create a stacking context (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)

• Browser: All browsers
• React Native for Web (version): 0.0.130

[necolas]

Please can you create a test case using RNW (eg on glitch or snack.expo.io)?

[JakeCoxon]

Sure

Snack - https://snack.expo.io/H1IDxIIaW
Glitch - https://glitch.com/edit/#!/disco-packet

[necolas]

Thanks, good find

[RangerMauve]

Will this incur a large performance hit?

[necolas]

Probably not. The only performance issue I'm aware of with z-index is when z-indices of elements are dynamically changed in a DOM tree. Adding zIndex:0 to every view doesn't seem to be an issue when locally testing Twitter Lite.

[madhaze]

With this update. We are unable to unset the z-index because the proptype expects a number.
"Warning: Failed prop type: Invalid prop zIndex of type string supplied to View, expected number."
so can't use initial or unset

[ickeep]

@necolas
The contents of the FlatList's ListHeaderComponent and renderItem are obscured by the ListFooterComponent

Can only be enforced by

  <View className="clear-flat-list-z-index" style={Style.wp}>
    <FlatList></FlatList>
  </View>

.clear-flat-list-z-index > div > div > div > div {
    z-index: auto !important;
}

[necolas]

Please open an issue with all the information in the template filled out