当父级具有`will-change：transform`属性时，`position：fixed`不起作用[重复]答案

【问题标题】：`position: fixed` not working when parent has `will-change: transform` property [duplicate]当父级具有`will-change：transform`属性时，`position：fixed`不起作用[重复]
【发布时间】：2020-07-17 03:20:50
【问题描述】：

我在一个父元素上使用了will-change: transform，它使滚动变得平滑。但是尽管使用了position: fixed，但仍有一些子 div 不再具有静态位置。

为了演示，我创建了这个基本网页。

请注意，当我向下滚动红色框时，黄色和绿色框会离开视口。

代码：

<style>
.app {
  background: silver;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: 99;
  will-change: transform;
}

.yellow-box-left .green-box-right {
  width: 250px;
  max-width: 250px;
}

.yellow-box-left {
  position: fixed;
  left: 0px;
  top: 0px;
  background: yellow;
}

.green-box-right {
  position: fixed;
  right: 0px;
  top: 0px;
  background: greenyellow;
}

.red-box-middle {
  min-height: 100%;
  margin-right: 250px;
  margin-left: 250px;
  position: relative;
  background: indianred;
}

</style>
<html>
  <div class="app">
    <div class="yellow-box-left">
      <!-- A list of words -->
    </div>
    <div class="red-box-middle">
      <!-- A long list to make this scrollable -->
    </div>
    <div class="green-box-right">
      <!-- A list of words -->
    </div>
  </div>
</html>

如何让这些子 div 保持在固定位置？

【问题讨论】：

在元素内部使用固定定位，它会受到任何类型的变换，效果不好。也许只将will-change: transform 应用于红框中间。
根据这篇文章似乎没有得到很好的支持：meyerweb.com/eric/thoughts/2011/09/12/…
阅读直到接受的答案结束

标签： html css will-change

【解决方案1】：

对于您提供的示例，我设法通过将 will-change: transform 移动到 .red-box-middle 来修复它。

【讨论】：