勉強したことのメモ

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

  関連記事

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...

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

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

CSSで1つの要素に複数classを設定して画像を入れ替える方法

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法

可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...