22

A div with "position: fixed" is embedded into a parent div. When the parent rotates or translates, the child div moves also.

Is it a bug? I expected the child div to remain fixed.

HTML snippet:

 <div id="mask">
    <div id="page">
    </div>
 </div>

See a repro at: http://jsfiddle.net/PseKK/

I know that I can fix it by applying the reverse transformation to the child div but for performance reasons in my real scenario, I am looking for a solution that doesn't involve extra-transformation.

Any idea how to overcome?

viebel
  • 19,372
  • 10
  • 49
  • 83

1 Answers1

14

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.

Community
  • 1
  • 1
JimmyBanks
  • 4,178
  • 8
  • 45
  • 72
  • 1
    Thanks a lot! Do you know how to 'making the transformed div an image and using it as the background' as they suggest? – viebel Feb 20 '12 at 16:22
  • 1
    I believe they are saying is that instead of using CSS for your transformed div, use an image, and place it as the background within a fixed div, so you will have an image placed, instead of actual CSS for the transform shape. [Unfortunately thats not really a "fix", but sounds like there's nothing else to do.] – JimmyBanks Feb 20 '12 at 16:26
  • what do you mean "there seems to be a way to get around it" ? why can't you just write it as an answer if there is a way, instead or posting a comment as an answer? – vsync Aug 12 '14 at 15:26
  • The background image fix that answer proposes is a very niche solution.. clearly not applicable to all instances of a fixed element with a transitioned parent. – Alkanshel Mar 20 '15 at 19:04
  • You should edit the answer and write what the way around it there is...... – mesqueeb Jul 12 '21 at 04:52