使用 jQuery 为关键帧动画设置 CSS 变量 - 在 Safari 和 Mobile 中不起作用

Question

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

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

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

Answer 1

我想我终于明白了。 Safari 似乎不喜欢在初始定义后重新计算任何 CSS calc() 值。

我没有在 CSS 中将动画属性附加到元素，而是创建了一个单独的类，并在计算变量后将 addClass() 添加到元素。似乎有效。

我现在必须解决的唯一错误是如何让它在调整浏览器大小时重新计算关键帧动画中的 calc() 值。

function refHeight() {
  if ($('#main-content').length != 0) {
    $(':root').css('--varheight', Math.round($('#main-content').outerHeight()) + 'px');
    $('.one').addClass('animated');
  }
}
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 {
  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;
}
.animated {
  animation: animOne 3s linear infinite alternate
}
@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>