CSS 变换导致 Safari 上的动画出现问题答案

【问题标题】：CSS Transform causing issues on Animation on SafariCSS 变换导致 Safari 上的动画出现问题
【发布时间】：2021-04-06 12:17:04
【问题描述】：

问题：wave 动画在 google chrome 上运行，但在最新版本的 safari 上根本无法运行。

这里是动画的链接：https://codepen.io/Chrys-Nicolaides/pen/mdrVvGR

我相信问题可能出在这里：

.waveOne, .waveTwo {
  transform: translate3d(0, 30%, 0);
}

我已经能够删除 '.waveOne, .waveTwo' 类，这使它工作 - 这让我认为是这个属性导致了这个问题。此解决方案可以使波浪的动画正常工作，但需要平移才能使其看起来正确。

我已尝试添加 -webkit-transform 和其他前缀，但它不能解决问题。

有什么想法吗？会不会和 GSAP 集成有关？

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
将转换更改为 px 值而不是 % 似乎有帮助 - 我尝试了 120px（400px 的 30%），但我找不到任何对 y 的 % 值的引用（或 x) 导致 Safari 出现问题。
谢谢@AHaworth，这很有效。我遇到的另一个问题是盒子阴影在 safari 上看起来被框住/平方。边界半径似乎不起作用？如果可以，您会知道为什么会发生这种情况或如何解决吗？我再次尝试了 -webkit 前缀等。

标签： css animation safari transform

【解决方案1】：

问题和后续 cmets 中概述了两个问题（都在 Safari 中看到）。首先是缺少动画，这可以追溯到这个设置：

.waveOne, .waveTwo {
  transform: translate3d(0, 30%, 0);
}

Safari 似乎对 Y 偏移的 % 值有一些困难。将其更改为像素高度的 30% 即可获得动画效果。

.waveOne, .waveTwo {
  transform: translate3d(0, 120px, 0);/* 120px is 30% of height of 400px */
}

这解决了问题中提出的问题，但当然不是任何尺寸/响应设置的通用解决方案，需要进行一些计算才能给出。

第二个问题是盒子阴影在 Safari 中似乎被裁剪了。看起来阴影不会超出元素的（矩形）形状。设置overflow: visible 允许阴影延伸。注意：将溢出设置为在容器上可见是不够的。

<!doctype html>
<html>
<head>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<style>
body, html {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: hsla(206, 23%, 94%, 1);
}

.container {
  width: 400px;
  height: 400px;
  position: fixed;
  background: hsla(206, 23%, 94%, 1);
}

.svgMask {
  height: 100%;
  width: 100%;
  position: relative;
  box-shadow: 18px 18px 30px rgba(209, 217, 230, 1), -18px -18px 30px rgba(255, 255, 255, 1);
  border-radius: 50%;
  overflow: visible;
}

.waveOne, .waveTwo {
  transform: translate3d(0, 120px, 0);
}

</style>
</head>
<body>
<div class="container">
<svg class="svgMask" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="waveMask">
      <rect width="600" height="600" />
  </defs>
  <g clip-path="url(#waveMask)">
    
    <path class="waveOne" id="waveOne" d="M0 0.143555C146.738 0.143555 226.221 39.8846 287.362 70.4549L287.365 70.4563C348.504 101.026 391.301 122.425 489.125 122.425C577.435 122.425 620.901 102.495 673.5 78.3771C679.168 75.7784 684.941 73.1311 690.888 70.4549C752.029 39.8846 831.512 0.143555 978.25 0.143555C1124.99 0.143555 1204.47 39.8846 1265.61 70.4549L1265.61 70.4563C1326.75 101.026 1369.55 122.425 1467.38 122.425C1555.68 122.425 1599.15 102.495 1651.75 78.377C1657.42 75.7784 1663.19 73.1311 1669.14 70.4549C1730.28 39.8846 1809.76 0.143555 1956.5 0.143555C2103.24 0.143555 2182.72 39.8846 2243.86 70.4549L2243.86 70.4563C2305 101.026 2347.8 122.425 2445.62 122.425C2533.93 122.425 2577.4 102.495 2630 78.3772C2635.67 75.7785 2641.44 73.1311 2647.39 70.4549C2708.53 39.8846 2788.01 0.143555 2934.75 0.143555C3081.49 0.143555 3160.97 39.8846 3222.11 70.4549L3222.11 70.4563C3283.25 101.026 3326.05 122.425 3423.88 122.425C3512.18 122.425 3555.65 102.495 3608.25 78.377C3613.92 75.7784 3619.69 73.1311 3625.64 70.4549C3686.78 39.8846 3766.26 0.143555 3913 0.143555V796.5H1956.5H0V0.143555Z" fill="#7CA7D9" opacity="0.7" />
    
<path class="waveTwo" id="waveTwo" d="M0 0.143555C146.738 0.143555 226.221 39.8846 287.362 70.4549L287.365 70.4563C348.504 101.026 391.301 122.425 489.125 122.425C577.435 122.425 620.901 102.495 673.5 78.3771C679.168 75.7784 684.941 73.1311 690.888 70.4549C752.029 39.8846 831.512 0.143555 978.25 0.143555C1124.99 0.143555 1204.47 39.8846 1265.61 70.4549L1265.61 70.4563C1326.75 101.026 1369.55 122.425 1467.38 122.425C1555.68 122.425 1599.15 102.495 1651.75 78.377C1657.42 75.7784 1663.19 73.1311 1669.14 70.4549C1730.28 39.8846 1809.76 0.143555 1956.5 0.143555C2103.24 0.143555 2182.72 39.8846 2243.86 70.4549L2243.86 70.4563C2305 101.026 2347.8 122.425 2445.62 122.425C2533.93 122.425 2577.4 102.495 2630 78.3772C2635.67 75.7785 2641.44 73.1311 2647.39 70.4549C2708.53 39.8846 2788.01 0.143555 2934.75 0.143555C3081.49 0.143555 3160.97 39.8846 3222.11 70.4549L3222.11 70.4563C3283.25 101.026 3326.05 122.425 3423.88 122.425C3512.18 122.425 3555.65 102.495 3608.25 78.377C3613.92 75.7784 3619.69 73.1311 3625.64 70.4549C3686.78 39.8846 3766.26 0.143555 3913 0.143555V796.5H1956.5H0V0.143555Z" fill="#AED5F5" opacity="0.7" />    
    </g>
    </clipPath>
</svg>
</div>
<script>
let waveOne = document.querySelector('.waveOne'), waveTwo = document.querySelector('.waveTwo')

let waveTimeline = new TimelineMax({repeat: -1});
waveTimeline.timeScale(3);

let waveOneTween = TweenMax.to([waveOne], 6.6, {
  x: -978.25,
  repeat: -1,
  ease: Linear.easeNone
});

let waveTwoTween = TweenMax.to([waveTwo], 6.5, {
  x: -978.25,
  repeat: -1,
  ease: Linear.easeNone
});

waveTimeline.add(waveOneTween, 0);
waveTimeline.add(waveTwoTween, 0);

let mainTimeline = new TimelineMax();
mainTimeline.timeScale(2);
</script>
</body>
</html>

【讨论】：