Actually I have found what has caused the problem. My question is now why adding transform
to your html, body
breaks the position: fixed
?
Original problem
The most simple CSS task seems to fail for me: position: fixed
does not keep the position of the element relative to the view point. Consider the following stylesheet:
.stay-there-dammit {
position: fixed;
right: 0px;
left: 0px;
z-index: 1030;
}
For the first time the page loads, the positioning is correct. But any changes to viewport such as scrolling or resizing doesn't affect the positioning of .stay-there-dammit
element. So to speak it doesn't adapt its position to the new viewport.
Strangely enough this site which shows how position: fixed
should work, actually work in my browser with no problems whatsoever!
So the question is: Is there anything that might break fixed positioning?
Btw. I use Bootstrap 3.
UPDATE:
It seems that it was the transform set by some third-party application on html,body
that broke the position: fixed
. Here is what I had to remove:
html, body {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3, mirror=1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
It seems that the following question addresses the same issue:
Positions fixed doesn't work when using -webkit-transform
BUT WHY?
Effectively it means that by specifying will-change:transform you make the element transformed (though visually it stays in the same position), and descendants of the transformed elements can't be fixed per the CSS Transforms spec.
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.
By using position: fixed on an element like the header, the element is removed from the stack and positioned relative to the browser window. That means it no longer takes up space and any elements positioned after it will adjust to fill up that area.
Regarding the why, a quick quote from this article by meyer:
A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport
It's a quirky behavior that's been around since 2011.
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