safariでの非表示部分でのチラつきを解消したいです。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
現在作成中のホームページのコーディングをしています。
https://deshinon.com/2019/03/06/background-oshare-kopipe/の「ふわふわ四角」とhttps://www.webcreatorbox.com/tech/javascript-particleにある、wavifyとを組み合わせて
波の中から図形が上がってくるようにしたいとのことでz-indexで重なり順を指定しposition:absoluteで重なり部分を加え
何の中から出てくるように形はできたのですが、
その近くの要素にアイコンでマウスオーバーした際に色の反転をするアイコンがあり、そこをマウスオーバーした際にwavifyの波の部分に重なっているふわふわ四角の図形が一瞬ちらつきがあり、見えないはずのエリアで図形が見えてしまうという現状が、PCのsafariでのみ発生しています。
そのちらつきを解消する方法はないでしょうか。現状調べては試してを繰り返していますが、一向に解消されず非常に困っております。
よろしくお願いいたします。

該当のソースコード

<div class="area"> <div class="recruit-content wrapper"> <h3>RECRUIT</h3> <h4><img src="common/images/rec_pc.svg" alt="" class="switch"></h4> <div class="btn"> <a href="#.html"><span>READ MORE</span></a> </div> </div> <ul class="circles"> <li> <div class="hexagon"> <div class="hexagon_frame"><img src="common/images/large.png" alt="角形"></div> </div> </li> <li> <div class="hexagon"> <div class="hexagon_frame"><img src="common/images/small.png" alt="角形"></div> </div> </li> <li> <div class="hexagon"> <div class="hexagon_frame"><img src="common/images/small.png" alt="角形"></div> </div> </li> </ul> </div> </section> </main> <footer> <!--波--> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg> <!--end--> <div class="foot-logo"> <a class="" href="./"> <svg x="0" y="0" viewBox="0 0 209.2 51"> <use class="t-logo" x="0" y="0" xlink:href="#logo"></use> </svg> </a>

		</div>
		<div class="footer-nav">
			<ul class="flex">
					<li><a href="#">test</a></li>
					<li><a href="#">test</a></li>
					<li><a href="#">test</a></li>
					<li><a href="#">test</a></li>
			</ul>
		</div>
		<div class="sns">
			<ul class="flex"><!--ここをマウスオーバーすると症状が出ます-->
				<li><a class="hovicon effect-2 sub-b" href=""><i class="fab fa-facebook-f "></i></a></li>
				<li><a class="hovicon effect-2 sub-b" href=""><i class="fab fa-instagram"></i></a></li>
			</ul>
		</div>
		

css

/ふわふわ四角部分/
.area{
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
/min-height:500px!important;/
height: 68rem;
position: relative;
}
.circles li,
.circles li img{
display: inline-block;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.circles{
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -2;

}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 3rem;
animation: animate 25s linear infinite;
bottom: -150px;
}
.hexagon {
width:50px;
height: 68px;
position: relative;
display: inline-block;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.circles li:nth-child(1){
left: 25%;
width: 3rem;
height: 3rem;
animation-delay: 0s;
display: inline-block;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.circles li:nth-child(2){
left: 10%;
width: 2rem;
height: 2rem;
animation-delay: 2s;
animation-duration: 12s;
display: inline-block;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.circles li:nth-child(3){
left: 70%;
width: 3rem;
height: 3rem;
animation-delay: 4s;
display: inline-block;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
@keyframes animate {

0%{
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
	display: inline-block;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

100%{
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
	
}

/波の部分（wavify）/
footer svg {
height: 50rem;
min-height: 35rem;
width: 100vw;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}

footer{
position:relative;
color: #fff;
}

.foot-logo{
display: block;
text-align: center;
display: block;
}
.foot-logo a svg{
fill:#fff;
width: 19rem;
top:-28rem;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
/マウスオーバーアイコン部分/
.sns{
text-align: center;
width: 10rem;
display: block;
margin:0 auto;
}
.sns ul{
justify-content:center;
margin-bottom: 4rem;
}
.sns ul li{
font-size: 18px;
display: inline-block;
}
.sns ul li i{
display: inline-block;
}
.sns ul li:first-child i{
vertical-align: middle;
font-size: 36px;
line-height: 1.5;
}

.hovicon {
display: inline-block;
font-size:2rem;;
line-height: 43px;
cursor: pointer;
margin: 15px 7px;
width: 43px;
height: 43px;
border-radius: 50%;
text-align: center;
position: relative;
text-decoration: none;
z-index: 1;
color: #fff;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

.hovicon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content:'';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.hovicon:before {
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
/* Effect 2 */
.hovicon.effect-2 {
color: #000;
box-shadow: 0 0 0 0px #000;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
overflow: hidden;
}
.hovicon.effect-2:hover {
box-shadow: 0 0 0 1px #fff;
}
.hovicon.effect-2:after {
top: -2px;
left: -2px;
padding: 2px;
z-index: -1;
background: #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.hovicon.effect-2.sub-a:hover, .hovicon.effect-2.sub-a:hover i {
color: #000;
}
.hovicon.effect-2.sub-a:hover:after {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
display: inline-block;
}
.hovicon.effect-2.sub-b:hover:after {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
-moz-transition: -moz-transform 0.4s, opacity 0.2s;
transition: transform 0.4s, opacity 0.2s;
display: inline-block;
}
.hovicon.effect-2.sub-b:hover, .hovicon.effect-2.sub-b:hover i {
color: #fff;
}
.fa-instagram:before {
content: "\f16d";
font-size: 26px!important;
line-height: 1.7!important;
}

試したこと

各部分に
-webkit-backface-visibility:hidden;
backface-visibility:hidden;

そのほかに
html{
-webkit-font-smoothing: antialiased;
}

body{
-webkit-font-smoothing: subpixel-antialiased;
}

-webkit-transform-style: preserve-3d;

などを追加したのですが解消されず困っています。
safariだけでのちらつきなので解消法方は調べて試してを繰り返していますが、一向に改善されない状態で、困っております。

補足情報（FW/ツールのバージョンなど）

safari バージョン14.1.2 (16611.3.10.1.6)