Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法
最近サイト内のツールページ等をMaterial Design Liteで作っているが、リンクやボタンをクリックしてもiPhoneのみ動作しないという現象が発生した。もちろんPCの各種ブラウザやAndroidだと問題無しという状況。以下に原因と対応方法についてメモ。
原因
クリック時に波紋のようなエフェクトを発生させる「.mdl-js-ripple-effect」というClassをつけているとiPhoneのみ動作しない模様。
対応方法
「.mdl-js-ripple-effect」というClassは削除する。具体的には以下の形となる。
<!-- こちらだと動作しない --> <a class="click mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent mdl-button--raised">link</a> <!-- こちらだと動作する --> <a class="click mdl-button mdl-js-button mdl-button--accent mdl-button--raised">link</a>
参考サイト
関連記事
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
Bootstrap5系でよく使う要素及びClass名のまとめ記事
サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...
-
-
スマホサイトでviewportを指定しても横スクロールバーが表示される
スマホ用のサイトでviewportが指定されており、widthも100%になって ...