inview.js 指定の動きがズレる

Question

実現したいこと

inview.jsを使用して、要素を下からのフェードインさせたい

問題

iPhoneで確認すると、どうしても要素が表示されてしまい、後からCSSの動き（フェードイン）をするので点滅してるように見えてしまいます。

該当のソースコード

 $(function() {
        // フェードイン
        $('.inviewfadeInUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
                $(this).stop().addClass('fadeInUp');
            }
        });
    });

<div class="styleLook">
　<div class="styleImg inviewfadeInUp"><img src="../common/img/scene01-02.jpg"></div>
  <div class="inviewfadeInUp detailImg detail01"><img src="../common/img/scene01-03.jpg"></div>
  <div class="inviewfadeInUp detailImg detail02"><img src="../common/img/scene01-04.jpg"></div>
  <div class="creditList">
   <ul class="credit inviewfadeInUp">
    <li><a href="#"><img src="../common/img/style01-01.jpg" alt=""></a></li>
    <li><a href="#">aaaaaaaaaa</a></li>
   </ul>
 </div>
</div>

.inviewfadeInUp {
	opacity: 0;
	transform: translate(0, 10%);
	-webkit-transform: translate(0, 10%);
	-ms-transform: translate(0, 10%);
	-moz-transform: translate(0, 10%);
	-o-transform: translate(0, 10%);
	transition: all 2s ease;
	-webkit-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
}

.fadeIn, .fadeInUp, .fadeInLeft, .fadeInRight {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-o-transform: translate(0, 0);
}

試したこと

jQueryのバージョンを変えたり、スクリプトの位置を変えたりしたのですが、様子が変わりません。

追記

Chromeの開発モードとiPhone6のみの確認ですが、iPhone6のみで起きています。

Comments

[x_x]

問題が発生するのはiPhoneだけということでしょうか？

Answer 1

環境がないので再現させられないのですが、Safari + transition + opacity では描画に問題があることが知られています。
このあたりの情報で解決しないでしょうか？
http://thamamur.hatenablog.com/entry/2014/02/05/150018
http://skyguild.jp/2017/10/safari_transition/

Comments

[Sayaka.I]

ありがとうございます。
教えていただきましたサイトの情報で解決いたしました。
本当にありがとうございました。