Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS zIndex behavior on native with non-flexbox #100

Open
necolas opened this issue Apr 18, 2024 · 1 comment
Open

CSS zIndex behavior on native with non-flexbox #100

necolas opened this issue Apr 18, 2024 · 1 comment
Labels
bug: react-native A bug that originates in React Native cannot polyfill This feature cannot be polyfilled for native

Comments

@necolas
Copy link
Contributor

necolas commented Apr 18, 2024

Describe the issue

React Native assumes only display:flex. When we try to emulate display:block (not supported on native) and the default of position:static, React Native will not ignore zIndex. This can result in layout stacking differences between web and native.

Expected behavior

zIndex should be ignored for non-flex elements that are statically positioned.

Steps to reproduce

See description

Test case

No response

Additional comments

No response
@necolas necolas added bug Something isn't working bug: react-native A bug that originates in React Native labels Apr 18, 2024
@necolas necolas mentioned this issue Apr 18, 2024
Open
@necolas necolas changed the title zIndex on native doesn't behave as expected with non-flex displays CSS zIndex behavior on native with non-flexbox Apr 18, 2024
@necolas necolas removed the bug Something isn't working label Apr 18, 2024
@nmn
Copy link
Contributor

nmn commented Apr 19, 2024

Doing this right might be a bit tricky since position static is always behind anything with position relative/absolute/fixed.

Perhaps, the solution is to bump all non-zero zIndex values by 1 and then set zIndex: 1 for all position: static elements?

@necolas necolas added the cannot polyfill This feature cannot be polyfilled for native label Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug: react-native A bug that originates in React Native cannot polyfill This feature cannot be polyfilled for native
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@necolas @nmn