勉強したことのメモ

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よりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法

何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...

CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法

CSSでブロック要素を中央寄せする場合はwidth指定しつつ「margin:0 ...

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

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

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成

CodeIgniter4.4.4&Bootstrap&jQuer ...