固定位置在绝对内部固定

Question

一个带有position: fixed的DOM元素，另一个带有css-transforms的DOM元素，另一个带有position: fixed

的DOM元素

所有固定位置元素都应该基于视口作为容器定位，但是当中间元素具有css-transforms时，内部固定元素将基于中间元素而不是视口定位。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="backdrop">
  <div class="contents">
    Contents in centered box
    <div class="inner-fixed">
      Inner-fixed contents
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果删除transform上的.contents，则会根据视口修复内部元素。

在Chrome 62和Firefox 57（Mac）中发生

使用相同的DOM可以解决这个问题，所以内部元素是基于视口修复的，而不必跳过使用css-transforms？

使用css-transform：

没有css-transform：