剪切路径过渡不适用于野生动物园

Question

我目前正在制作svg的揭示动画。

如您所见，以下代码段在Chrome和Firefox中效果很好，但在Safari浏览器中绝对不行。

有人知道如何使其在野生动物园工作吗？还是您知道实现它的其他方法？

谢谢！

$(window).on('load', function(){
	$('.wave-content').addClass('show');
});

.screen {
	position: relative;
	animation-fill-mode: forwards;
	// background: $bleu;
	width: 100vw;
	height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 100);
	margin: 0 auto;
	overflow: hidden;
}

.wave-content{
	position: absolute;
	transition: clip-path 2s, -webkit-clip-path 2s, width 2s;
	-webkit-transition: clip-path 2s, -webkit-clip-path 2s, width 2s;
	transition-delay: 0.5s;
	clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	-webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	right: -17%;
	top: 20%;
	z-index: 0;
	width: 200%;

}

.wave-content.show {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="screen">
<div class="wave-content">
<svg class="wave" viewBox="0 0 18 5">
<path class="wave__path" d="M13.53,5c-1.68,0-2.54-0.99-3.17-1.71C9.79,2.63,9.54,2.4,9,2.4c-0.54,0-0.79,0.23-1.36,0.89C7.01,4.01,6.15,5,4.47,5
    C2.79,5,1.93,4.01,1.3,3.29C0.72,2.63,0.47,2.4-0.06,2.4V0c1.68,0,2.54,0.99,3.17,1.71C3.68,2.37,3.93,2.6,4.47,2.6
    s0.79-0.23,1.36-0.89C6.46,0.99,7.32,0,9,0s2.54,0.99,3.17,1.71c0.57,0.66,0.82,0.89,1.36,0.89s0.79-0.23,1.36-0.89
    C15.52,0.99,16.39,0,18.06,0v2.4c-0.54,0-0.79,0.23-1.36,0.89C16.07,4.01,15.21,5,13.53,5z"/>
</svg>
</div>
</div>