CSS 转换导致 Safari 上的动画出现问题

Question

问题：波形动画在 google chrome 上有效，但在最新版本的 safari 上运行根本不起作用。

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

我认为问题可能出在这里：

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

我已经能够删除 '.waveOne 上的变换， .waveTwo' 类这使它起作用 - 这让我认为正是这个属性导致了这个问题。此解决方案使波浪动画有效，但需要翻译才能使其看起来正确。

我尝试添加 -webkit-transform 和其他前缀，但它并没有解决问题。

有什么想法吗？会不会与 GSAP 整合有关？

Answer 1

问题和后续评论中概述了两个问题（均在 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 */
}

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

第二个问题是方框阴影在 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>

CSS 转换导致 Safari 上的动画出现问题

CSS Transform causing issues on Animation on Safari

css

safari

animation

transform