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>
参考サイト
関連記事
-
-
SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて
ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
-
-
CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法
他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...
-
-
IE11でSB Admin2のログインページの表示がおかしい
ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...