First element in the tree having position:absolute is invisible until Inspect is toggled #22692
Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info:
System:
OS: Windows 10
CPU: ia32 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 1.36 GB / 15.89 GB
Binaries:
Node: 11.2.0 - C:\nodejs\node.EXE
Yarn: 1.12.3 - C:\Apps\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338
Happens on Android 8.1.0, Xiaomi Redmi Note 5 Pro with MIUI 10.0.6.0 Stable, official, with no mods. Not tested on other devices.
Description
Element being "first of siblings" in a tree (more on that later) having position: absolute is invisible until Inspect is turned on. It is rendered normally after closing the inspector. Trying to dynamically toggle position or top properties doesn't help (I tried to force re-render with that).
Video: https://www.youtube.com/watch?v=szMEhaDOCxA
Explaination of first of siblings:
Bug will happen:
<Element>
<Absolute>
<Contents />
</Absolute>
</Element><Element>
<Element>
<Absolute>
<Contents />
</Absolute>
<AnotherElement />
</Element>
</Element>Bug won't happen:
<Element>
<Element>
<AnotherElement />
<Absolute> <-- Absolute isn't first of siblings -->
<Contents />
</Absolute>
</Element>
</Element><Element>
<Another />
<Element>
<Absolute> <-- Absolute isn't first of siblings in a whole tree, its parent is a 2nd sibling -->
<Contents />
</Absolute>
</Element>
</Element>Reproducible Demo
Repository:
https://github.com/dzek69/react-native-position-absolute-bug
But the code is quite simple, this is enough to reproduce:
import React from "react";
import {Text, View} from "react-native";
function Modal(props) {
const style = {
position: "absolute",
zIndex: 1,
left: 0,
top: 0,
};
return (
<View style={style}>
{props.children}
</View>
);
}
function Balance() {
const rootStyle = {
flex: 1,
backgroundColor: "#ff0"
};
return (
<View style={rootStyle}>
<Text style={{fontSize: 40}}>there should be text above that</Text>
</View>
);
}
const App = () => {
return (
<View style={{flex:1, position:"relative"}}>
<Modal><Text>hello</Text></Modal>
<Balance />
</View>
);
};
export default App;