勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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>

参考サイト

https://github.com/google/material-design-lite/issues/5281

関連記事

: tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

: 「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

: 「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

: YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

: jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...