CSS Transform Parent and Fixed child

Question

I hope this information helps others who are experiencing issues with "position : fixed" when working on a project that utilizes themes, 3D, transform, sliders, animations in Chrome browser.

Issue: Element positioned with fixed position: does not appear in correct position, will not break out, and is locked in to parent container.

Issue in more detail: A Child element with position fixed which is contained by parent elements with property position set to relative and transform set to anything other than none, that child element uses its parent container with property transform set in order to determine fixed positioning and will not "break out" or determine fixed position to viewport as expected.

The answer to this is specified by: Saml in https://stackoverflow.com/revisions/15256339/2

This issue appears to be caused because CSS transform property is set. CSS transform creates a new local coordinate system for the element of which the children of that element will use for positioning. This causes any element with position:fixed to fix to the last element with transform not equal to none.

This is exactly how transform is is suppose to work according to the w3 spec and it works in chrome as specified in the spec. https://www.w3.org/TR/css-transforms-1/#transform-rendering

This is not a bug, you will need to remove the transform property or move the element outside of transform element.

Genova

Answer 1

I do not have a solution that will allow you to break out a child element from a parent that has css property transform set. Please reference the work around below to unset transform on the parent until a better solution is found.

Solution to breakout child item by setting transform to none: (Will not work if you require the parent to have transform set)

This same answer is also found: here - https://stackoverflow.com/revisions/15256339/2 and here - https://css-tricks.com/forums/topic/fixed-positioning-not-working-in-chrome/#post-188228

Set the following properties on the parent element that is catching the child. This is intended per w3c spec (see links above), it does not affect FF.
-webkit-transform: none !important; transform: none !important;

Make sure you are setting the parent container as position relative as well.

Genova