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

Question

実現したいこと

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

前提

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>

試したこと

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

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

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

Comments

[Lhankor_Mhy]

PC の Firefox でも表示されませんでした。

Answer 1

CSSネストが使えるのは、現在のところ最新のChrome系だけです。
CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc | CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc

.top_bg .slick-slide {
	.slick-initialized & {
		display: block;
	}
}

https://f-f-life.com/recruit/wp-content/themes/xeory_extension_child/css/recruit.css

SCSSとしてコンパイルしてみてはどうでしょうか。

Comments

[Lhankor_Mhy]

あ、Safari も 16.5 で対応したんですね。見落としてました。
OSをアップデートすれば、解決するかもしれないですね。

[Parom]

ご回答ありがとうございます！
たしかに先ほど iPhone の OS のアップデートを行ったところ、
正常に表示されるようになりました。

しばらくの間は表示されない人も出てしまいますが、
iOS は Android に比べて格段に最新 OS を使う方が多いと思いますので、
あまりここに手をかけず、このままで進める事にします。

ありがとうございました！