Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法
最近サイト内のツールページ等を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>
参考サイト
関連記事
- 
					
													  
- 
					HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ... 
- 
					
													  
- 
					videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ... 
- 
					
													  
- 
					tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法tableのtd内にcheckboxを設置し、td部分をクリックすることでche ... 
- 
					
													  
- 
					Material Design Liteでセレクトメニュー(プルダウン)の作成方法Material Design Liteでformのセレクトメニュー(プルダウン ... 
- 
					
													  
- 
					CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法CSSでブロック要素を中央寄せする場合はwidth指定しつつ「margin:0 ...