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>
参考サイト
関連記事
-
-
CSSのpointer-eventsプロパティで指定した要素をクリック不可にする方法
ページ内の指定のボタンをクリックしても動作しないという症状が発生し、ソースコード ...
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
CSSで親子関連のセレクターをネスト(入れ子)で指定する方法
CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...
-
-
LINE風のふきだしデザイン
LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...
-
-
Flash上にHTMLのテキストやリンク(aタグ)を重ねる方法
FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...