Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Applying `translateZ(0px);` breaks all fixed child elements

See original GitHub issue

After updating this package I found that my fixed-position mobile menus (children of the Sticky component) had broken.

Turns out (according to 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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:5
  • Comments:19 (9 by maintainers)

github_iconTop GitHub Comments

MatanBobicommented, Nov 27, 2016

+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…

dotbearcommented, Aug 31, 2016

@dbarbalato yeah, we’re just sticking with 5.0.4 for now. A prop to disable/enable is a great idea!

Read more comments on GitHub >

github_iconTop Results From Across the Web

'transform3d' not working with position: fixed children
Try to apply opposite transform to the child element: <div style='position:relative; border: 1px solid #5511FF; -webkit-transform:translate3d(0px, ...
Read more >
translateZ() - CSS: Cascading Style Sheets - MDN Web Docs
The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer.
Read more >
420534 - translateZ makes position:fixed children relative to ...
Issue 420534: translateZ makes position:fixed children relative to translated element instead of viewport. Reported by schedule aberg.
Read more >
Tricks for Using CSS translateZ() and perspective()
Once you exceed the value of perspective() the element will no longer be visible. Applying perspective(0px). Any value for perspective() will ...
Read more >
Transform and z-index stacking context - GSAP - GreenSock
As a result, the child element with z-index remains below the ... a simple CSS of translateZ(0px) and that will solve your issue...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found