Fixed positioning with parent element having transformations - html

Question

After spending much time coding a website, my whole plan seems to have just shattered. I came across that I was unable to position any elements with 'fixed' - they just wouldn't work. After some research, I figured it was to do with the fact that the element's parent contains several transformations and this means that you are unable to have a fixed element as it is not now fixed to the viewport, but to the parent's transformations.
I NEED to be able to use fixed positioning, but my whole HTML code is inside this div with the transformations - and I can't change that as it's a fundamental part of the design.
Im not to sure if there is any fix for this, or some way to get around the problem possibly with jQuery or something. Please help me out! If it's required I can provide some code.
Thank you!
http://wtfhtmlcss.com/#position-transforms
Here is some CSS:
.container {
background: #fff;
min-height: 100%;
position: relative;
outline: 1px solid rgba(0,0,0,0);
z-index: 10;
-webkit-transform: translateZ(0) translateX(0) rotateY(0deg); reset transforms (Chrome bug)
transform: translateZ(0) translateX(0) rotateY(0deg);
}
.container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0px;
opacity: 0;
background: rgba(0,0,0,0.2);
/* the transition delay of the height needs to be synced with the container transition time */
-webkit-transition: opacity 0.4s, height 0s 0.4s;
transition: opacity 0.4s, height 0s 0.4s;
}
.animate .container::after {
opacity: 1;
height: 101%;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Effect Move Left */
.effect-moveleft {
background-color: rgb(50,50,130);
}
.effect-moveleft .container {
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.effect-moveleft .container::after {
background: rgba(255,255,255,0.6);
}
.effect-moveleft.animate .container {
-webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
}
.no-csstransforms3d .effect-moveleft.animate .container {
left: -75%;
}
The container obviously contains the whole body code.
Then there is the DIV which I have set to fixed positioning and which won't fix.

Answer 1

The CSS Transforms Module Level 1 says
For elements whose layout is governed by the CSS box model, 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.
However, it seems there isn't consensus:
ISSUE 1: Is this effect on position: fixed necessary? If so,
need to go into more detail here about why fixed positioned objects
should do this, i.e., that it’s much harder to implement otherwise.
See Bug 16328.
So you can wait and maybe the spec will be changed.
But a better approach would be moving your fixed element outside the transormed element.