我有一个CSS关键帧动画，它使用一个CSS变量作为动画属性之一。这个变量是在jQuery中定义的。整个动画在Chrome和Firefox中看起来运行良好。然而，在Safari和移动的浏览器中，只有没有使用该变量的动画部分才能正常工作。
我花了很多时间试图排除这个问题...

• 在所有浏览器的最新版本上测试。
• 在Safari浏览器页面上检查我的开发工具会显示变量定义正确（例如1200px）。
• 我已经在CSS中将变量硬编码为相同的像素数，动画工作正常。
• 我已经在jQuery中将变量硬编码为相同的像素数（而不是计算出来），但是动画不起作用。
• 我已经将该变量用作元素选择器本身（而不是关键帧）中的属性，它将按预期定位元素。
• 尝试使用“转换：translateY（...）”而不是“top：“，结果相同。
• 有时候，如果我让窗口打开，动画会“启动”并按预期开始工作。但是，我不能手动复制这一点。据我所知，它没有一致性。

从所有这些来看，似乎是jQuery中定义的变量（也不适用于直接JavaScript）和动画中使用的变量的组合存在问题。
你知道发生什么事了吗？

function refHeight() {
  if ($('#main-content').length != 0) {
    $(':root').css('--varheight', Math.round($('#main-content').outerHeight()) + 'px');
  }
}
window.addEventListener('load', refHeight);
window.addEventListener('resize', refHeight);

:root {
  --hardvarheight: 75vh;
}

#main-content {
  width: 100%;
  height: 75vh;
}

.item {
  width: 75px;
  height: 50px;
  font-size: 80%;
}

.one {
  animation: animOne 3s linear infinite alternate;
  position: absolute;
  background-color: pink;
}

.two {
  position: absolute;
  top: calc(var(--varheight) / 100 * 50);
  left: 50vw;
  background-color: lightblue;
}

.three {
  animation: animThree 3s linear infinite alternate;
  position: absolute;
  background-color: lightgreen;
}

@keyframes animOne {
  0% {top: calc(var(--varheight) / 100 * 10); left: 40vw;}
  50% {top: calc(var(--varheight) / 100 * 20); left: 50vw;}
  100% {top: calc(var(--varheight) / 100 * 10);left: 60vw;}
}

@keyframes animThree {
  0% {top: calc(var(--hardvarheight) / 100 * 80); left: 40vw;}
  50% {top: calc(var(--hardvarheight) / 100 * 90); left: 50vw;}
  100% {top: calc(var(--hardvarheight) / 100 * 80); left: 60vw;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-content">
  <div class="item one">Animated Using jQuery Variable</div>
  <div class="item two">Positioned Using jQuery Variable</div>
  <div class="item three">Animated Using CSS Variable</div>
</div>