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>
参考サイト
関連記事
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法
可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...
-
-
Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法
何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...