"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.
viebel
Love Javascript and Maths (especially Axiomatic Set Theory). Appreciate Functional Programming especially Clojure and ClojureScript.
Updated on June 06, 2022Comments
-
viebel almost 2 years
A
div
with"position: fixed"
is embedded into a parentdiv
. When the parent rotates or translates, the childdiv
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 about 12 yearsThanks a lot! Do you know how to 'making the transformed div an image and using it as the background' as they suggest?
-
JimmyBanks about 12 yearsI 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.]
-
vsync over 9 yearswhat 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?
-
Alkanshel about 9 yearsThe 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.
-
mesqueeb almost 3 yearsYou should edit the answer and write what the way around it there is......