HOME > CSS > Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法

Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法

2024/09/27 CSS

最近サイト内のツールページ等をMaterial Design Liteで作っているが、リンクやボタンをクリックしてもiPhoneのみ動作しないという現象が発生した。もちろんPCの各種ブラウザやAndroidだと問題無しという状況。以下に原因と対応方法についてメモ。

1 原因
2 対応方法
3 参考サイト

原因

クリック時に波紋のようなエフェクトを発生させる「.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>