こんにちは、工藤です。
Android4系の標準ブラウザのバグで引っかかったことがありましたので書き留めておきます。
前回：Androidでつまずいたバグについてのまとめ
画像をcssで丸く切り抜ぬくと標準ブラウザでのみ表示が異なる
ここ最近よく見る画像の丸い切り抜きです。ユーザーさんが登録したアイコンなどはcssで切り抜く（ように見せる）のが手っ取り早いですね。
今回は下の画像のように表示させるつもりでcssを設定しました。
|
1 2 3 4 5 6 7 8 9 |
img { width:200px; height:200px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border:#99CC33 solid 3px; box-sizing:border-box; } |
IEの古いバージョンなどは今回は置いておいて…現在のブラウザならたいていは表示できる、と思ったのとその時点ではimgを直接装飾した方が都合がよかったのでそうしていました。
chromeもfirefoxもIE10以上もsafariも大丈夫…
が、標準ブラウザで確認すると以下のように表示されていました。
上下左右に見事なまでに隙間ができてしまいました。
Android標準ブラウザって角丸のレンダリングに問題があるんですね…
色々調べたり心当たりのあるcssをあててみたりしたのですが結局以下のように設定するしかありませんでした。
HTML
|
1 2 3 |
<!--アイコン画像//--> <p class="roundImg"></p> <!--//アイコン画像--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
p.roundImg{ width:200px; height:200px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border:#99CC33 solid 3px; box-sizing:border-box; background: url(画像のURL) no-repeat 50% 50%; background-size: cover; } |
つまるところ要素の背景に画像を指定しました。
そうするとAndroidの標準ブラウザでも特に問題なく表示されました。
背景に指定して困ることもそんなにないとは思うので、Androidも環境の対象になっている場合はもとから背景に画像を指定するべき、ということを学びました…。
以上です。
