CODEWITHSUNDEEP
htmlcsscss-positiontransform
Jordan H
Jordan H

Reputation: 55665

Using CSS transform scale breaks position:fixed

I am experiencing an odd issue and am wondering if it's a bug in the rendering engines - it occurs in WebKit and also Firefox that I've tested.

If you have a div that's fixed on the page and you add another div inside it and also set it to be fixed (to obtain a fixed header within a fixed popup), you can ensure that the header will remain visible even when the user scrolls the popup. Unless you set transform scale on the popup - doing that will break position:fixed and cause it to no longer fix to the top of the parent div and instead it will scroll along with the content. Is that expected behavior - how can I work around that?

JSFiddle

Upvotes: 3

Views: 3946

Answers (1)

Phil Tune
Phil Tune

Reputation: 3305

Well the transform: scale(x) will break the element out of the coordinate flow and thereby can not have a fixed position.

I'd recommend instead wrapping the text below #header in a constrained div with overflow: auto. A fixed child of a fixed ancestor just doesn't make that much sense, but I can see what you were going for.

Upvotes: 1

Related Questions