CSS transform: translate moves postion:fixed inner Div

Question

The following example shows a div inside a div. The inner div is

position: fixed;

When I add

transform: translate(0px, 0px);

to the outer div, the inner div will no longer behave as fixed

Link to the example: http://dabblet.com/gist/1723937

So, does translate actually change the viewport? Can anyone help me to keep the inner div fixed using css, when the outer div has a translate style?

Thank you, Felix

Answer 1

Here is an article on it:

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

Hope you find it helps.