tips blog

【jQuery】Slickとmodaalの相性が悪い

2020年4月3日

Slick(ver 1.6.0)とmodaal(ver 0.4.4)の相性が悪かったのでメモ。

Slickのスライダー内のコンテンツのボタンにモーダルウィンドウを開くボタンを付けたいとクライアントからの要望で、使い勝手の良いmodaal(ver 0.4.4)を入れた。
(ver 0.x.xを実用するなという声は少し置かせて頂いて)
テストプレビューで確認すると時々Slickのコンテンツがズレてる現象を確認。

色々動作を確認すると、モーダルウィンドウを開くボタンをマウス押しながら(マウスダウン)少しスライドした状態で、マウスを離す(マウスアップ)とモーダルウィンドウが開き、
モーダルウィンドウを閉じると!Slickのスライダーがズレる!という事を確認。

あーだこーだと、原因追及した結果。
modaalの閉じる機能に以下のコードがあり、これをコメントアウトすると正常になる事を確認。

モーダルを開く前にフォーカスされてた箇所に、閉じるときに戻す機能のようで、それが原因でズレてたみたい。
Slickのコンテンツにフォーカスが移動したら、なぜズレるの?
Slickに問題あるくない?と思ったが、フォーカスを戻す必要も無いので、一旦調査完了。
上記コードをコメントアウトで解決させた。

【まとめ】

■現象
・Slickでコンテンツがずれる。
・Slickでコンテンツが途中で止まる。
・Slickをスライドさせた状態で、modaalを開くとモーダルウィンドウを閉じたときに、コンテンツがずれる。

■状態
・Slick(ver 1.6.0)とmodaal(ver 0.4.4)を使用。
・Slickのコンテンツ内にmodaalのボタンがある。

■解決
modaal.jsの1001-1003行目をコメントアウト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です