transform や transitionが ios chromeの場合動作がおかしい。

html
1<div class="top-wrapper fadein">
2    <img src="img/logo.png" class="logo">
3</div>
4<div class="middle-wrapper fadein">
5    <img src="img/logo.png" class="logo">
6</div>
7<div class="bottom-wrapper fadein">
8    <img src="img/logo.png" class="logo">
9</div>

※HTMLを追記しました。これらの要素にcssでbackground-image: url('画像')を指定しています。
iPhoneXS MaxでiOSバージョンは12.4です。

css
1.fadein {
2    opacity: 0;
3    -webkit-transform: translateY(20px);
4    transform: translateY(20px);
5    -webkit-transition: all 1.5s;
6    transition: all 1.5s;
7}

javascript
1$(window).scroll(function(){
2    $(".fadein").each(function() {
3        var targetElement = $(this).offset().top;
4        var scroll = $(window).scrollTop();
5        var windowHeight = $(window).height();
6        if(scroll > targetElement - windowHeight + 200) {
7            $(this).css({
8                "opacity": "1",
9                "-webkit-transform": "translateY(0)",
10                "transform": "translateY(0)"
11            });
12        }
13    });
14});

5時間ほど、調べて試しましたが解決しなかったので質問させていただきます。
要素までスクロールすると、下から要素が出てくるというアニメーションをつけたいのですが、
PCのブラウザでは、Chrome Firefox Opera MSedgeで動作したのですが、
iPhoneではSafariでは動作しますが、Chromeではopacityやtransform transtionが動作しません。
動作する位置までスクロールすると、急に要素が表示されます。キャッシュなども削除しました。
ベンダープレフィックスをつけて試してみましたが結果は同じでした。
この場合どうすればいいのでしょうか？よろしくお願いいたします。