在 iOS 13 及更低版本上破坏移动 Safari 中的滚动时间线和 Web 动画的不受支持的功能是什么？

Question

我想弄清楚为什么网络动画API和滚动时间线不能在ios 13及以下版本的移动游猎中工作。是的，我知道这两个功能在那些版本的safari上通常不受支持，但我已经为这两个添加了polyfill(可以在这里和这里看到(，但仍然有其他东西破坏并阻止了该功能的正常工作。你可以看看这个代码笔看看我的意思。

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>

正确的行为是；改变的bg"；当你滚动到页面的顶部时，方框是红色的，当你在底部时，方框则是蓝色的。在ios 14和15上运行正常(如果你没有这些iPhone，你可以在浏览器堆栈上查看(，但在13及以下版本上则不然。对我来说，它至少需要在ios 13上运行。所以我的问题是，还缺少什么需要polyfilling才能正常运行？

Answer 1

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

然而，滚动时间轴polyfill已经进行了一些更改(根据规范的更改(。例如，他们已经删除了滚动偏移。scrollSource似乎被术语source等所取代。

如果您正在使用cdn导入分发，则它可能已更改为包含/修改某些属性。如果您使用的是内部版本的本地版本，那么这是不适用的。

下面的帖子描述了如何解决这个问题，如果你的代码与更新后的polyfill的规格不匹配的话。

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