こういう奴ではやはり、四角になりますか?
僕も色々試してみたんですが、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 23:10