Question

问题：波浪动画可在谷歌浏览器上运行，但无法在最新版本的 safari 上运行。

这是动画的链接：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 */
}

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

第二个问题是盒子阴影在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 上的动画出现问题

1 个答案: