react-sticky: Applying `translateZ(0px);` breaks all fixed child elements
After updating this package I found that my fixed-position mobile menus (children of the Sticky component) had broken.
Turns out (according to http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform) you cannot have fixed elements as children of transformed elements.
the fixed position of an element is broken if you apply transform to any ancestor.
Maybe something worth thinking about? I’m not sure if it’s a specific issue itself, but thought I’d alert you.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 5
- Comments: 19 (9 by maintainers)
Commits related to this issue
- Make 3d transform fix opt-in. (Closes #116) — committed to nhardy/react-sticky by nhardy 8 years ago
+1 for this, Currently using 5.0.4 cause the translateZ(0px) also using z-index to control tooltip over elements and the translateZ breaks it…
@dbarbalato yeah, we’re just sticking with
5.0.4for now. A prop to disable/enable is a great idea!