rippleエフェクトをiOSのブラウザで表示すると四角形になってしまう

[iOS9端末のsafariで表示したボタン]

マテリアルデザインのrippleエフェクトをjQueryで表示できるMaterialRippleを使用しているのですが、丸いボタンにこのエフェクトを適用し、波の色を暗い色に変えた場合、エフェクトが四角形になってしまいます。

Material Rippleのdemoページ右下の丸いボタンもよく見ると四角になっているようで、背景色も白に近い色に変えてごまかしているように見えます。

Googleが用意しているMaterial Design Lite(以下、MDL)のボタンはちゃんと丸い影が出るのですが、このエフェクトを表現したいためだけにMDLを使用するのは気が引けるので、丸い影のエフェクトを表示する方法を教えていただければと思います。

※MDLの丸い影が出るボタンについては、こちらのページを
「」
で検索したソースを使用しているボタン（真ん中のWith rippleボタン）を
参照して下さい。

行動規範の内容に同意します

回答1件

こういう奴ではやはり、四角になりますか？

僕も色々試してみたんですが、firefoxではyanchi4425さんが言われるように四角く縁取られ、何度か試していると問題なく表示されるようになることもありました。

chromeでは最初から問題なかったように思います。

さて、このサンプルですが、本来.buttonには.ripple-outerというのは入れていませんでした。
.rippleの部分も、.buttonに直接入れてやっていたのですが、もしかすると.buttonのoverflow:hidden;が効いていないのかもと、.ripple-outerを入れたわけです。

これを入れることでどうなるのを予想していたかというと、.bottonのz-index: 200が最前面でoverflow: hiddenで、はみ出し部分を非表示していて、.ripple-outerがz-index:1(あるいは100)で.buttonの背面にあって、その間に.rippleがある(z-index:100で試した時)ので、最前面のものがはみ出し部分を非表示にしてくれる...と言うのを期待していましたがやはりダメでした。

ここら順序はouterとripple部分を入れ替えたり色々しましたが、やはりchromeでは問題なく、firefoxでは丸よりも外のborder-radiusで作る前のサイズで四角く表示されることがありました。

で、最初辺りにも書きましたが、何度か試しているとちゃんとはみ出し部分を非表示にしてくれる時もあったりして、原因がつかめずにいます。
おそらくは、border-radius: 50% + overflow はいずれかに問題があって、上手く動作するブラウザとそうでないものがあると言う感じではなかろうかと思います。

chromeでは、何度か再読込させて試しましたがはみ出し部分の非表示は問題なく行けました。chromeが本来して欲しい動作をしているので、これが正解だとすると、それ以外ではブラウザに問題があるとしか言えない感じです。

ripple-outerの無いバージョンではchromeでも四角が表示されます。

###まとめ
iOSに限らず、通常のブラウザでもborder-radiusで丸くした要素にoverflow:hiddenで非表示にした場合でも、border-radiusの適用前のサイズまでrippleが広がって四角く見えてしまう。

これを回避するためには、全面・背面と要素を配置し、背面にrippleを入れ、全面でoverflow:hiddenをすれば一部ブラウザは期待通りの動作をしてくれる。

と言う感じかと思います。他のブラウザは試していないので、いろいろ試してみて下さい。

投稿2016/06/16 14:29