2

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

Jordan H
  • 52,571
  • 37
  • 201
  • 351
  • 1
    possible duplicate of [webkit css 'transform3d' + 'position: fixed' issue](http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue) – Michael Robinson Dec 10 '14 at 20:42

1 Answers1

1

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.

Phil Tune
  • 3,154
  • 3
  • 24
  • 46