勉強したことのメモ

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

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

  CSS

最近サイト内のツールページ等を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>

 

参考サイト

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

 - CSS

  関連記事

管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート

新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて

ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...

Material Design Liteでセレクトメニュー(プルダウン)の作成方法

Material Design Liteでformのセレクトメニュー(プルダウン ...

Bootstrap5系でよく使う要素及びClass名のまとめ記事

サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...