Semantic UIを使用しているモーダルのスクロールが反応しない(ver 2.3.3)
ポートフォリオサイトを作成して早速デプロイしたので、 モバイルから動作検証をしたところ
- モーダルのスクロールができない
- モーダルを閉じた後にページ全体のスクロールができない
という事象が発生。
発生したのはAndroid, ios両方のchrome
androidからpuffinで確認した際は問題なかった。
結論: Semantic UI 2.3.2以降のバグ(2.4系は修正済み)
調べてみると、githubにすでにissueが上がっていた。 どうやら "2.3.2でモーダルスクロールのバグが発生している" らしい。
私の使用しているバージョンは2.3.3だったが、コメントを見ていくと以下の記述を見つけた
>batata004 commented on 18 Jul • >I can confirm this bug happens not only when you have modals opened, it happens even when you dont use modals. In the case of https://www.sitepor500.com.br if you simply open it (dont need to raise/open any modals) the scrolling will not work. I was using 2.3.3. version and then I downgraded it to 2.3.1. and everything came back to work just fine.
2.3.3でも動かないようです・・・・・
対処法としては以下の３つ
- バージョンを2.4系に上げる
- バージョンを2.3.1に下げる
- ソースからインストールしてきて、2.3.2で行われた修正を書き換える
まずは2.4系に上げることを考えたが、適用してみるとかなりレイアウトが崩れた。
どうやらクラスの定義がところどころ変わっているような感じ？
今回は他にも実装しなければいけない機能もあり、期限も決まっていたため、いったん2.3.1に下げることで
対応することにした。
ソースから入れることも考えたが、インスタンスをUSリージョンに立てていることもあり、 ファイルを増やして読み込みに時間がかかるのはなぁ・・・・と思い却下した。
まとめ
Semantic UIでモーダルスクロールが効かない場合はバージョンを疑う
2.3→2.4にはそれなりに労力かかりそうなので優先度みて一旦後回しにしま～～～す😿
まぁ、いったん落ち着いたら2.4用に組みなおします・・・。
