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 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.

Issue Analytics

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

Top GitHub Comments

1reaction

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…

1reaction

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!

Top 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, ...

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.

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.

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 ...

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...