CSS Transform causing issues on Animation on Safari
Question
Problem: The wave animation works on google chrome but simply does not run on the latest version of safari.
Here is the link to the animation: https://codepen.io/Chrys-Nicolaides/pen/mdrVvGR
I believe the problem might lie here:
.waveOne, .waveTwo {
transform: translate3d(0, 30%, 0);
}
I have been able to remove the transform on the '.waveOne, .waveTwo' classes and that makes it work - which leads me to think that it is this property that is causing the issue. This solution makes the animation of the waves work, but the translation is required for it to look right.
I have attempted adding -webkit-transform and other prefixes however it doesn't fix the problem.
Any ideas? Could it be related to the GSAP integration?
1 answers
solution1
0 ACCPTED 2020-12-31 08:57:33
There are two problems (both seen in Safari) outlined in the question and subsequent comments. The first is lack of animation which was traced to this setting:
.waveOne, .waveTwo {
transform: translate3d(0, 30%, 0);
}
It seems that Safari has some difficulty with the % value for the Y offset. Changing this to be 30% of the height in pixels gives the animation.
.waveOne, .waveTwo {
transform: translate3d(0, 120px, 0);/* 120px is 30% of height of 400px */
}
This solves the problem as posed in the question but of course is not a general solution for any size/responsive set up and some calculation would be needed to give that.
The second problem is that the box shadow appears to be cropped in Safari. It looks as though the shadow will not extend beyond the (rectangular) shape of the element. Setting overflow: visible allows the shadow to extend beyond. Note: setting the overflow to visible on the container is not enough.
<: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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.