Menu
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.
334
To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element. This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
The one key thing to remember when trying to position a child div relative to it's parent is that the child should be given the CSS property position:absolute; and the parent set to either position:absolute; or position:relative;.
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
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.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
