css - 为什么 css 滚动快照无法在 ios 较新版本上运行？

Question

我已经实现了CSS Scroll Snap。我使用 chrome 开发工具在较小的屏幕上对其进行了测试。它仅适用于Moto G4、Galaxy S5、Iphone 5/6/7/8 和 Galaxy Fold。css 功能无法在较新版本的 Iphone 手机（如6/7/8 plus 和 X ）上运行。此外，它在Ipad、Ipad pro 和 chrome 开发工具中的其他设备上都失败了。

我可能会错过什么？

HTML

<div class="inner">
  <a href="#">Superfoods</a>
  <a href="#">Snacks</a></li>
  <a href="#">Frühstück</a></li>
  <a href="#">Superfoods</a>
  <a href="#">Snacks</a></li>
  <a href="#">Frühstück</a></li>
  <a href="#">Kochen & Backen</a>
  <a href="#">Supplements</a>
  <a href="#">Getränke</a>
  <a href="#">Non-Food</a>
  <a href="#">Sale</a>
  <a href="#">Food Journal</a>
</div>

CSS

body{
  margin: 0;
}

.inner{
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  list-style:none;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  white-space: nowrap;
 scroll-snap-type: x mandatory;
  -webkit-scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  width: 100%;
  height: 60px;
}



a{
  text-decoration: none;
  color: black;
  scroll-snap-align: start;
  -webkit-scroll-snap-align: start;
  -ms-scroll-snap-align: start;
}

代码