Positions fixed doesn't work when using -webkit-transform
After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.
I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari) */
#transformed_div {
/* styles here, background image etc */
}
}
So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.
EDIT: As of 10/24/2012 the bug has not been resolved.
This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.
How to force position fixed when parent container has a transformation?
The Answer is simple this is not possible with CSS. Visit the following question for details
Positions fixed doesn't work when using -webkit-transform
'transform3d' not working with position: fixed children
But you can achieve your target with js here is a basic example.
$(window).scroll(function() { $(".transform-fixed").css({ "top": $(window).scrollTop() });})
.rotate { transform: rotate(30deg); background: blue; width: 300px; height: 300px; margin: 0 auto; }.fixed { position: fixed; background: red; padding: 10px; color: white; top: 50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>
<body> <div class="rotate"> <div class="fixed transform-fixed"> I am fixed inside a rotated div.</div> </div> <div class="fixed"> I am fixed outside a rotated div.</div></body>
</html>
transform3d' not working with position: fixed children
This is because the transform
creates a new local coordinate system, as per W3C spec:
In the HTML namespace, any value other than
none
for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
There's not currently a work-around that I'm aware of.
It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.
position: fixed div is not fixed when parent rotates or translates
This is a repost, the answer is located in this original question
Positions fixed doesn't work when using -webkit-transform
Unfortunately it is a bug, but there seems to be a way to get around it.
Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below)
Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
Edit (03/2015):
This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%)
. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%
) because it will be relative to the parent and not the element it's applied to. transform
behaves differently. Its values are relative to the element they are applied to. Thus, 50%
for transform
means half the width of the element, while 50%
for margin is half of the parent's width. This is an IE9+ solution
Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
If you want it to be centered, you can do that too:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Demos:
jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer
Position fixed not working is working like absolute
The issue here lies with your .content-container
wrapper class, which has a CSS declaration of webkit-transform: translate3d(0,0,0)
. The transform declaration, as this answer illustrates, changes the positioning context from the viewport to the rotated element, which essentially means that your fixed
element behaves as if it were absolutely positioned. Here's an example showing the difference between a fixed element inside a transformed div
and a fixed element outside of that div
.
.rotate { transform: rotate(30deg); background: blue; width: 300px; height: 300px; margin: 0 auto;}.fixed { position: fixed; background: red; padding: 10px; color: white; top: 50px;}
<div class="rotate"> <div class="fixed"> I am fixed inside a rotated div.</div></div><div class="fixed"> I am fixed outside a rotated div.</div>
position: fixed not woking when parent has the transform CSS property
This is not a bug.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
So according to the spec: the element with fixed positioning will become relative to the element with the transform - not the viewport
As a workaround you could:
1) Use transitions (eg. on the left
property) instead of transform (translateX
)
2) Remove the position:fixed
button from the container which uses transforms
Related Topics
The CSS Selector for an Element That Its Id Is in The "Foo:Bar" Form
How to Create a Mobile Friendly Website [Infrastructure]
Video Player Shows Black Border
Styling The Calendar for HTML5 Native Datepicker
Wrapper Div Height Is 0 with Floated Elements Inside
How to Fix Background Image Inside Div
How to Center an Inline Div Using CSS
Sass Image CSS Cache Busting (Via Compass)
Keeping Top Level Menu in Hover State When Moving Down to Sub Menus
Why Doesn't The Wrapper Div Wrap The One and Two Divs? (In Firefox Browser)
Images Not Showing in Phonegap Build Application
Styling Input Range for Webkit with Pure CSS
How to Stop Manual Input in a Type=Number But Still Allow Changes with The "Up/Down" Buttons
Flexboxes Overlapping Instead of Pushing Aside
Applying a Stylesheet Within One Div Only
How to Set Height of Element to Match Height of Another Element