Chromeで、ギャラリーが正しく動作しないケースがある

[ey]

————————————————–
WordPress のバージョン：5.5.3
Welcart のバージョン：1.9.36
PHP のバージョン：7.4.4
ご利用のテーマ：WelcartBasic の自作子テーマ
症状を確認したブラウザ：Google Chrome ver. 86.0.4240.183
サーバー：Xserver Business
SSLの利用：常時SSL
———————————————–
Google Chromeで、ファイルにリンクしたギャラリーがうまく動作しない場合があります。
ビューポートの横幅が一定以下の時（1060px以下で発生しだすことが多いです）、
ギャラリー画像をクリックして拡大画像を表示したとき、右上のｘをクリックしても
閉じることができません。
また画面下に出るはずの左右移動の矢印も表示されません。

使用している画像のサイズはすべて同じですが、正常に動作するもの、しないものがあります。
また、正常に動作していた箇所でも動作しなくなる場合があり、発生場所は限定されません。
（問題発生箇所でも、ビューポートを広げると閉じるの機能は正常に動作します。左右矢印は出ません）
PC版、Android版、どちらでも発生しています。

FireFoxでは正常に動作し、問題はありませんでした。

Chromeでの操作時、Consoleを確認すると[Intervention] Unbale to preventDefault inside passive event listener due to target being treated as passive.
とでて、原因か所としてjquery.js:3行目が指摘されます。

• このトピックはeyが3年、 5ヶ月前に変更しました。
• このトピックはeyが3年、 5ヶ月前に変更しました。

Attachments:

You must be logged in to view attached files.

[ohnishi]

こんにちは

症状を確認いたしました。
次期バージョンにて修正させていただきますので、
お急ぎの場合は、下記のテンプレートの修正をおこなってみてください。

welcart_basic（親テーマ）/js/wp-swipebox.js 8行目あたり

if (!$(event.target).closest('#swipebox-overlay img,#swipebox-overlay .visible-bars').length) {
	event.preventDefault();
	event.stopPropagation();
	$.swipebox.close();
}

event.preventDefault();
event.stopPropagation();

を追加して確認のほうお願いいたします。

> 画面下に出るはずの左右移動の矢印も表示されません。

上記に関しては、モバイル時のSwipebox ライブラリの仕様となります。

どうぞよろしくお願いいたします。

[ey]

ohnishi様
ご対応、ありがとうございます。

ご連絡いただいたコードを入れたところ、無事閉じることはできたのですが、
今度は、一度閉じると2回目以降ギャラリーの画像をクリックしても反応しなくなってしまいました。

[ohnishi]

症状確認いたしました。

11月10日 に投稿した内容に関しては、
元の状態に戻していただいて、
下記のテンプレートの修正をおこなっていただけますでしょうか。

次期バージョンでも同じ内容で修正をおこなわさせていただきます。

1. welcart_basic/js/jquery.swipebox.js 587行目あたり

$( '#swipebox-close' ).bind( action, function() {
	event.preventDefault();
	event.stopPropagation();
	$this.closeSlide();
} );

	event.preventDefault();
	event.stopPropagation();

を追加してください。

2. welcart_basic/functions.php 201行目あたり
wp_enqueue_script( 'swipebox', $template_dir . '/js/jquery.swipebox.min.js',

を
wp_enqueue_script( 'swipebox', $template_dir . '/js/jquery.swipebox.js',

に変更してください。

修正内容は以上となります。
申し訳ございませんが、再度ご確認お願いいたします。

[ey]

ohnishi様
ご連絡、ありがとうございます。

無事正常に動作するようになりました！
助かりました。

ご対応、ありがとうございました。

[投稿者]

投稿