css - 在 chrome 版本 57 中，固定的 css 位置在其父容器的左侧发生变化时表现奇怪

Question

当位置固定的子元素出现在具有相对位置且其左侧在 javascript 中发生更改的容器元素内时，子元素会随着 chrome 57 中的容器移动。下面的代码解释了此行为。

$(document).ready(() => {
  setInterval(() => {
    $('.container').animate({
      left: "-=10",
    })
  }, 10)
});

.container {
  width: 1000px;
  height: 100px;
  background: #ccc;
  margin-left: 500px;
  position: relative;
}

.fix {
  padding: 20px;
  position: fixed;
  background: #000;
  color: #fff;
  width: 800px;
  top: 30px;
  border-bottom: 3px dashed #fff;
}

<div class="container">
  <div class="fix">
    Fixed
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但在 firefox 和 chrome 56 中，无论容器元素如何，子元素都保留在同一位置。

这是最新版 chrome 中的错误吗？还检查了 chrome 57 的变更日志，其中没有说明这一点。

Answer 1

如果不覆盖固定元素的顶部和左侧，它们将由 webkit 渲染引擎定义为其相对父元素的顶部和左侧。在本例中为变化的左侧。尝试向固定元素添加左、右、下或上位置。

$(document).ready(() => {
  setInterval(() => {
    $('.container').animate({
      left: "-=10",
    })
  }, 10)
});

.container {
  width: 1000px;
  height: 100px;
  background: #ccc;
  margin-left: 500px;
  position: relative;
}

.fix {
  left:0;
  padding: 20px;
  position: fixed;
  background: #000;
  color: #fff;
  width: 800px;
  top: 30px;
  border-bottom: 3px dashed #fff;
}

<div class="container">
  <div class="fix">
    Fixed
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>