jQuery 生成的变量未传递到 Safari 上的 CSS 关键帧动画

Question

我有一个 CSS 关键帧动画，它使用 CSS 变量作为动画属性之一。这个变量是在 jQuery 中定义的。整个动画似乎在 Chrome 和 Firefox 中运行良好。但是，在 Safari 和移动浏览器中，只有动画中未使用该变量的部分才能正常工作。

我花了很多时间尝试调试问题...

• 在所有浏览器的最新版本上进行测试。
• 在 Safari 页面上检查我的开发者工具显示变量定义正确（例如 1200px）。
• 我已经将变量硬编码为 CSS 中的相同像素数，并且动画按预期工作。
• 我在 jQuery 中将变量硬编码为相同的像素数（而不是计算它）并且动画不起作用。
• 我将该变量用作元素选择器本身（而不是关键帧）中的属性，并且它按预期定位元素。

从所有这些来看，这似乎是在 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: 100px;
  height: 100px;
}

.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>