質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 62

score 0

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
現在作成中のホームページのコーディングをしています。
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)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る