使用-webkit-overflow-scrolling在元素顶部拖动元素会导致基础元素滚动

Question

我只在iOS上注意到这一点。尚未在android上进行测试。

如果不可滚动元素与-webkit-overflow-scrolling: touch;重叠，则在顶部元素上拖动时，其下方的元素也会滚动。

我还注意到，如果下面的元素具有overscroll-behavior: contain;，-webkit-overflow-scrolling: touch;似乎不起作用。

有人可以解释问题是什么以及在顶部元素上拖动时如何防止底部元素滚动吗？

这是一个Codepen-https://codepen.io/mcoker/pen/NJWvVZ

body {
  font-size: 3em;
  margin:0;
}

section {
  height: 100vh;
  background: #c00;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

aside {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  background: green;
  width: 50vw;
  z-index: 1;
  overscroll-behavior: contain;
}

<aside>
  <p>aside</p>
  <p>aside</p>
  <p>aside</p>
  <p>aside</p>
  <p>aside</p>
  <p>aside</p>
</aside>
<section>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
  <p>section</p>
</section>