Slick.js が iPhone でだけ表示されない

実現したいこと

ファーストビューの画像をカルーセルで表示したい。

前提

slick.js を使用して画像が右から左に流れて入れ替わっていく表示をしています。
Windows の Chrome では、通常の表示も
デベロッパーツールを使用してスマートフォンの画面幅で表示した場合も正常に表示されています。
Android 実機の Chrome でも表示してみましたが、そちらも正常でした。

ですが、iPhone 実機の Safari 、Chrome で表示すると、
カルーセル部分が全く表示されませんでした。

発生している問題・エラーメッセージ

Windows の Chrome のデベロッパーツールで見ても
特にエラーなどは出ていません。

該当のソースコード

読み込み

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/ rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

スクリプト

if($('.top_bg').length){ $('.top_bg').slick({ arrows: false, // 前・次のボタンを表示する dots: false, // ドットナビゲーションを表示する speed: 1000, // スライドさせるスピード（ミリ秒） slidesToShow: 1, // 表示させるスライド数 centerMode: true, centerPadding: 0, autoplay:true, responsive: [ { breakpoint: 768, // 399px以下のサイズに適用 settings: { slidesToShow: 1, }, }, ], }); };

HTML

<ul class="top_bg"> <li><img src="/img/top/header_slide_01.png" alt="メインビジュアル1" width="2400" height="1174"></li> <li><img src="/img/top/header_slide_02.png" alt="メインビジュアル2" width="2400" height="1174"></li> <li><img src="/img/top/header_slide_03.png" alt="メインビジュアル3" width="2400" height="1174"></li> <li><img src="/img/top/header_slide_04.png" alt="メインビジュアル4" width="2400" height="1174"></li> </ul>

試したこと

タグのCSSに問題がないか、確認のため、 タグの直下にタグを入れてみたところ、画像は表示されたので、 タグ以下に問題がありそうな気がします。

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

問題が発生しているサイトはこちらです。（現在 WordPress へ移行中）
https://f-f-life.com/recruit/