使用变量的 CSS 动画在 Safari 或 iOS 中不起作用

Question

我用 CSS 制作了一个动画。它在 Chrome 和 Firefox 上运行完美，但在 Safari 以及 Safari 和 Chrome 移动版上似乎存在 CSS 变量问题。我可以看到动画的其他部分在工作，但顶部没有功能。该变量在 jQuery/Javascript 中定义。

使用完全相同的计算和变量作为直接属性而不是动画的一部分在那些浏览器中工作得很好。我很困惑。

有什么想法吗？我正处于 CSS/Javascript 的新领域，所以请像和孩子说话一样回答。

function refHeight(){
    if ($('#home-intro-stg2').length != 0) {
      var homeref = $('#home-intro-stg2').outerHeight() + "px";
      document.body.style.setProperty('--homeheight', homeref);
      console.log('Intro: ' + homeref);
    }
}
  window.addEventListener('load', refHeight);
  window.addEventListener('resize', refHeight);
  window.addEventListener('scroll', refHeight);

@keyframes animSpaceship {
    0% {right: 8vw; top: calc(var(--homeheight) / 100 * 6); transform: scale(1.4,1.4) rotate(0deg);}
    5% {right: 8vw; top: calc(var(--homeheight) / 100 * 6); transform: scale(1.4,1.4) rotate(-20deg);}
    16% {right: 72vw; top: calc(var(--homeheight) / 100 * 32); transform: scale(1.8,1.8) rotate(0deg);}
    18% {right: 72vw; top: calc(var(--homeheight) / 100 * 32); transform: scale(1.8,1.8) rotate(20deg);}
    22% {right: 2vw; top: calc(var(--homeheight) / 100 * 42); transform: scale(1.6,1.6) rotate(0deg);}
    24% {right: 2vw; top: calc(var(--homeheight) / 100 * 42); transform: scale(1.6,1.6) rotate(-20deg);}
    40% {right: 74vw; top: calc(var(--homeheight) / 100 * 70); transform: scale(1.4,1.4) rotate(0deg);}
    42% {right: 74vw; top: calc(var(--homeheight) / 100 * 70); transform: scale(1.4,1.4) rotate(20deg);}
    46% {right: -1vw; top: calc(var(--homeheight) / 100 * 75); transform: scale(1.2,1.2) rotate(0deg);}
    48% {right: -1vw; top: calc(var(--homeheight) / 100 * 75); transform: scale(1.2,1.2) rotate(-20deg);}
    50% {right: 50vw; top: calc(var(--homeheight) / 100 * 94); transform: scale(1,1) rotate(0deg);}
    100% {right: 50vw; top: calc(var(--homeheight) / 100 * 94); transform: scale(1,1) rotate(0deg);}
  }