スクロールでフェードインアニメ時、iOSでスクロールがカタつく原因

Question

いつもお世話になっております。

ウェブサイトでよくみかける、スクロールをしていくとフワッと現れるアニメーション　を実装したところ、
表題にもあるように、iOSでのみスクロールが止まってしまう問題が起きてしまいました。(AndroidやPCでは問題ないようです)

どなたかご存知の方がいましたら、お力を貸して頂けないでしょうか？

起きている問題

・じっくり見るようにゆっくりとスクロールする分には、スクロールは引っかかりません。
・ササッと早くスクロールしようとすると、該当のcssアニメーションが起きる地点で、一度ピタッと止まってしまいます。（そこからスクロールを再開することは可能な状態です。）

試したこと・調べたこと

・transform: translate3d(0,0,0);　をつける
・will-change: transform;　をつける
・https://teratail.com/questions/10632　こちらの質問者と同じような現象が生じているのだと思いますが、回答者によりますと「iOS8からは改善されてたみたい」とあり、解消されているはずなのですが（検証端末はiOS12なため）、カタついたままです。

/* スクロールでフェードインアニメ */
var posi_top,wih_half,current_view;

$(window).load(function(){

	var wih = window.innerHeight;
	var wih_half = wih*3/5;
	current_view = wih_half;
	set_posi();
});

$(window).resize(function() {

	var wih = window.innerHeight;
	var wih_half = wih*3/5;
	current_view = wih_half;
	set_posi();
});

$(window).scroll(function(){

	var wih = window.innerHeight;
	var wih_half = wih*3/5;
	current_view = $(this).scrollTop() + wih_half;
	set_posi();

});

function set_posi(){

	$('.anime_center').each(function() {
		var posi = $(this).offset();
		posi_top = posi.top;

		//初回のみ
		if(current_view > posi_top){
			$(this).addClass('do');
		}
	});

}

.anime_center{
    visibility: hidden;
}
.do{ 
    animation-duration: 2s;
    animation-name: RightToLeft;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    visibility: visible;
}

/* 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0;
    transform: translateX(50px);/* X軸方向に50px */
    text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.30), 6px 0px 15px rgba(255, 255, 255, 0.00);
  }
40%{
    text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.30), 6px 0px 15px rgba(255, 255, 255, 0.80);
}
  100% {
    opacity: 1;
    transform: translateX(0);
    text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.0), 6px 0px 15px rgba(255, 255, 255, 0.0);
  }
}

※htmlは省いております。anime_centerというクラス名を要素にもたせ、画面上から3分の5の高さにくると、フワッとでてくる、という仕組みとなっております。

Answer 1

フェードインしてくる要素が、body幅よりも外側から入ってきてしまうことが原因でした。

そのため、css内のtransform: translateX(50px)→(20px)※bodyに収まるようにすることで、解決致しました。

/* 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0;
    transform: translateX(20px);/* X軸方向に20px */
    text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.30), 6px 0px 15px rgba(255, 255, 255, 0.00);
  }
40%{
    text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.30), 6px 0px 15px rgba(255, 255, 255, 0.80);
}
  100% {
    opacity: 1;
    transform: translateX(0);
    text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.0), 6px 0px 15px rgba(255, 255, 255, 0.0);
  }
}