在 iOS 13 及更低版本的 mobile safari 中，有什么不受支持的功能会破坏滚动时间线和网页动画？

Question

我试图弄清楚为什么 Web 动画 API 和滚动时间线在 ios 13 及更低版本的移动 safari 上不起作用。是的，我知道这些版本的 safari 通常不支持这两个功能，但我为这两个功能添加了填充（可以参见 此处和此处），但仍有其他问题正在破坏并预防该功能正常工作。您可以查看 此 codepen 来了解我的意思。

                    const sectionScrollTimeline = new ScrollTimeline({
                        scrollSource: document.body,
                        orientation: 'inline',
                        fill: 'both',
                    });
document.querySelectorAll('.alter-me').forEach(node => node.animate({
  backgroundColor: ['red', 'blue']
}, {
  duration: 1000,
  fill: 'both',
  timeline: new ScrollTimeline({
          scrollOffsets: [
              new CSSUnitValue(0, 'px'),
              new CSSUnitValue(200, 'px')
          ]
  })
}));

.alter-me {
  padding: 2em;
  border: 1px solid black;
}

<p class="alter-me">altered bg</p>

<ul>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
</ul>
<p class="alter-me">altered bg</p>

正确的行为是，当您滚动到页面的底部时，“更改的背景”框为红色，当您滚动到页面底部时，“更改的背景”框为蓝色。在 ios 14 和 15 上可以正常工作（如果您没有这些 iPhone，可以检查 Browserstack），但是13 及以下不适用。至少它需要在 ios 13 上为我工作。所以我的问题是还缺少什么需要填充才能正常工作？

Answer 1

我不能确定你的问题是否与此有关，因为这取决于你访问滚动时间线填充的方法。

然而，滚动时间线填充已经发生了一些变化（根据规范的变化）。例如，他们删除了scrollOffsets。 scrollSource 似乎被术语源等取代。

如果您使用 CDN 导入发行版，它可能已更改为包含/修改某些属性。如果您使用的是本地版本的构建，那么这不适用。

下面的文章描述了如果您的代码与更新后的 polyfill 的规范不匹配的情况下如何解决该问题。

https://github.com/flackr/scroll-timeline/issues/ 64#issuecomment-1201541446