マテリアルデザイン・CSSフレームワーク「Materialize」のモーダルでスタックオーバーフローが発生する件

カテゴリ: CSS

記事投稿日: 2018年6月25日

おしゃれで見やすいマテリアル・デザインができるフレームワーク「Materialize」。

Twitter Bootstrap を使ってきた方なら、すぐに導入することができますが、最初のバージョンが出た当初は、JSのバグが結構あり、採用を見送ったことがあります。

今回のバグは、モーダルを表示した後、確認用のモーダルをもうひとつ開くと、スタック・オーバーフローが発生し、使用メモリがふくらんでブラウザが固まってしまうという現象です。

エラー箇所で検索すると、materialize の GitHub に issue として上がっている問題でした。

デグレているのか、現場では解決されていませんでした。
修正箇所は2か所です。

・_handleFocus の this.el.focus(); をエスケープ

・ _handleDocumentClickMove の e.preventDefault(); をエスケープ

エラーを追って、エスケープすればいいだけですが、念のため、覚書として残しておきます。

「Materialize」はおしゃれで、モバイル向けのモーダルの出し方もあり、使ってみたくなるフレームワークですが、たまにこのようなバグがあるので、Twitter Bootstrap ほど安心してコーディングできません…。