【解決済】サブ画像が一部表示されないことがある

[ohtysfm]

お世話になります。
現在、Welcart Vollにてショッピングサイトを運用中です。

商品詳細ページにおいて、サブ画像の表示に不具合が生じているため、こちらで質問させていただきます。

商品ごとに画像を5枚登録し、
商品詳細ページにて、メイン画像とサブ画像5枚を表示させています。

しかし、商品詳細ページをパソコンのブラウザで開くと、
メイン画像の左横に設置したサブ画像の縦スライダーのなかに画像が4枚しか表示されません。
ところが、ブラウザのウィンドウサイズをほんの少しでも変更すると、サブ画像が正常に5枚表示されるようになります。
（ブラウザのウィンドウを大きくしても小さくしても、表示が正常化します）

商品詳細ページを開いたときだけ、サブ画像の表示に不具合が生じる原因が分かりません。
その原因と対応についてご教授いただけますでしょうか。

——————————————-
WordPress のバージョン：6.4.3
Welcart のバージョン：2.9.14
PHP のバージョン：8.1.22
Welcart専用の拡張プラグインとバージョン：なし
ご利用の親テーマとバージョン :Welcart Basic 1.8.3
ご利用の子テーマとバージョン :Welcart Voll 1.0.9
症状を確認したブラウザ：Google Chrome、Microsoft Edge
サーバー【重要】：エックスサーバー
——————————————–

[ikeda]

ohtysfm 様
こんにちは。
恐れ入りますが弊社環境ではご指摘の症状を確認することができませんでした。
下記は Welcart VOLL のデモサイト商品詳細ページですが、同じ症状が発生するかどうかご利用の端末でご確認いただけますでしょうか。
https://themes.welcart.info/basic-voll/?p=528

[ohtysfm]

お世話になっております。
先日はお忙しい中、ご確認いただき、ありがとうございました。

Welcart VOLL のデモサイト商品詳細ページでは、該当の症状は発生しませんでした。

ご返答いただいた後も、当方のサイトのcssをチェックしましたが、症状が改善されずにいます。
chromeのデベロッパーツールでサブ画像部分のHTMLを確認すると、

<div aria-live="polite" class="slick-list draggable" style="height: _____px;">
<div class="slick-track" style="opacity: 1; height: _____px; top: 0px;" role="listbox">

のpx値が、ブラウザの若干のサイズ変更でも自動的に修正され、表示が正常化しています。

どのcssファイルが原因でこのようなことがおこるのか、手がかりでもあれば、と考えています。
誠に恐れ入りますが、ご教授いただきますよう、よろしくお願いいたします。

[ikeda]

ohtysfm 様
ご確認ありがとうございます。
横長の商品画像を登録した際に、同様の症状になるのを確認いたしました。
お手数ですが、下記のCSS を 管理画面 > 外観 > カスタマイズ の「追加CSS」に追記して症状が改善されるかご確認いただけますでしょうか。

@media screen and (min-width: 38.75em) {
	#itempage .itemsubimg,
	#itempage .itemsubimg .slick-list{
		height: auto !important;
	}
}

[ohtysfm]

お世話になっております。
早速のご返信、ありがとうございます。

教えていただいたCSSを追加すると、症状が改善されました。
誠にありがとうございます。

ただ、1点だけ
当方が登録している商品画像は正方形ですので、
御社の環境での「横長」という条件には当てはまらないのが気になるところです。

ともあれ、当方の不具合が解消されましたこと、あらためてお礼申し上げます。

[投稿者]

投稿