what's the unsupported feature that breaks scroll timeline and web animations in mobile safari on ios 13 and below?

Question

I'm trying to figure out why web animations API and scroll timeline are not working on mobile safari on ios 13 and below. Yes I know both features are not normally supported on those versions of safari, but I've added polyfills for both (can see here and here) and still something else is breaking and preventing the feature from working correctly. You can check out this codepen to see what I mean.

                    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>

The correct behavior is that the "altered bg" boxes are red when you're scrolled to the of the page, and blue when you're at the bottom. Works correctly on ios 14 and 15 (you can check on Browserstack if you don't have these iphones) but not on 13 and below. At a bare minimum it needs to work on ios 13 for me. So my question is what else is missing that needs polyfilling for this to work propery?

Answer 1

I can't say for sure whether your issue has anything to do with this, because it would depend on your method of accessing the scroll-timeline polyfill.

However, the scroll-timeline polyfill has undergone a few changes (in accordance with the changes of the spec). For example, they have deleted scrollOffsets. scrollSource seems to be replaced by the term source, etc.

If you are using a cdn to import the distribution, it may have changed to include/modify certain properties. If you are using a local version of the build then this is not applicable.

The post below describes how to tackle that issue, if it is the case that your code doesn't match the specs of the updated polyfill.

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