0

One DOM element with position: fixed, another one inside with css-transforms, another one inside that one with position: fixed

All fixed position elements is supposed to be positioned based on the viewport as container, but when the middle element has css-transforms, the inner fixed element is positioned based on the middle element instead of the viewport.

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
}

.contents {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;
  border: 1px solid red;
  transform: translateX(-50%) translateY(-50%);
}

.inner-fixed {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 255, 0.1);
  width: 100px;
  height: 50px;
}
<div class="backdrop">
  <div class="contents">
    Contents in centered box
    <div class="inner-fixed">
      Inner-fixed contents
    </div>
  </div>
</div>

If I remove the transform on the .contents, the inner element is fixed based on viewport.

Happens in Chrome 62 and Firefox 57 (Mac)

Any way around this with the same DOM, so the inner element is fixed based on the viewport without having to skip the use of css-transforms?

With the css-transform:

enter image description here

Without the css-transform:

enter image description here

henit
  • 1,150
  • 1
  • 12
  • 28
  • It looks like the `transform` property is being used to *vertically and horizontally* center the `.contents` element. If this assumption is correct, consider exploring an alternative method to aligning the element in question, one that does not require the `transform` property in any form, e.g: https://jsfiddle.net/o8mc2p9r/ The behaviour you are observing is expected in instances where a containing element, with the property `transform` (of any value), has a nested element that has its position `fixed`. – UncaughtTypeError Dec 13 '17 at 07:47
  • @UncaughtTypeError Everywhere I have read about `position: fixed`, it says they should always position based on the viewport. How does it make sense that moving a parent element a little bit with a `transform` should suddenly make the fixed element position based on that element? If that is expected behaviour, where is that documented? – henit Dec 13 '17 at 08:06
  • 1
    Here: https://www.w3.org/TR/css-transforms-1/#issue-fc114988 (see the paragraph just above the Error note). More specifically, it is considered a bug with webkit browsers - it seems to be dated issue now, one that is yet to be resolved, so this behaviour *has now become expected*. This issue has also been thoroughly covered in this question as well: https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform – UncaughtTypeError Dec 13 '17 at 08:23
  • Then I will find alternative solutions to positioning the middle element. Thanks! – henit Dec 13 '17 at 09:05
  • Not sure if you had the opportunity to consider the alternative solution I proposed in this JSFiddle: https://jsfiddle.net/o8mc2p9r/ (it could work for you in this case) – UncaughtTypeError Dec 13 '17 at 09:08
  • Haven't tried it in the app, but from the jsfiddle it looks like it should solve it, thanks! – henit Dec 13 '17 at 09:44

0 Answers0