堆栈滚动，具有滚动快照和固定位置

Question

我将scroll-snap与position: sticky结合使用，而<{>似乎就像一种优雅的方法，可在滚动时启用堆叠卡效果。

它在台式机上运行非常好，但在Safari（iOS12.1）上却遇到故障，有时卡会一起滚动，从而跳过内容。

在移动Safari上复制错误的最明显方法是：

• 向下滚动到最底部的屏幕
• 关闭（模糊）并重新打开Safari
• 然后尝试再次向上滚动

经验丰富的错误：正在跳过所有屏幕，无法进行导航。

我想让它仅与CSS一起使用，但是我愿意使用任何（好的）解决方案。最后，它旨在在ReactJS应用程序中工作。

演示：https://codepen.io/theo_t/full/BbGoWq

.container {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

.item {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  scroll-snap-align: start;
  width: 100%;
  height: 100vh;   
}