Can't get working in firefox/safari. Am I missing something?

Am I missing something about how this is supposed to work? I have the following setup which is working in Chrome natively, but I have yet to get either of these to work with the polyfill in Firefox/Safari

index.html:

<head>
...
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
<style>
      header {
        animation: scroll-shadow linear both;
        animation-timeline: scroll();
        animation-range: 0rem 4rem;
      }

      @keyframes scroll-shadow {
        from {
          box-shadow: none;
        }

        to {
          box-shadow: var(--shadow);
        }
      }

      .sub-header {
        --distance: 10rem;
        --animation-range:
          entry calc(100cqh - var(--scroll-margin, 0px))
          entry calc(100cqh - var(--scroll-margin, 0px) + var(--distance));
        animation: fade-in linear both;
        animation-timeline: view();
        animation-range: var(--animation-range);                  
      }

      @keyframes fade-in {
        from {
          opacity: 0;
          height: 1px;
        }

        to {
          opacity: 1;
          height: auto;
        }
      }
</style>
</head>

flackr / scroll-timeline

Can't get working in firefox/safari. Am I missing something? #262