jpeg画像にborder-radius。andoroidで見ると背景が黒い

製作

最終更新日:2020/11/14

ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。さっそくみてみる

jpeg画像にcssでborder-radiusを設定。んで角丸にしておしゃれ感を出す、よくやる小技だと思います。

そんで普通に角丸やらまん丸やらなら大丈夫だったんですが、4角それぞれの丸みを別個で設定するみたいなちょい複雑めなborder-radiusを設定してみる。そうするとアンドロイド端末のクロームで閲覧した場合に、こんな感じになる。

なんだこれ…。border-radiusで切り取ったはずの角に四角い黒いのが残ってる。ちなみに解決方法はまだないです。我こそはborder-radiusの申し子!という有識者の方はぜひ記事下部よりコメントいただければありがたいです。

  1. 発生環境
  2. 画像サイズが大きいと起こる
  3. backgroundにしても起こる
  4. divで囲んでも黒くなる
  5. 解決方法がない…

発生環境

  1. android:7.0
  2. Chrome:86.0.4240.185

簡単なborder-radius、例えば「border-radius:50%;」とかだと起きない。ちょっとムズ目のborder-radius「border-radius:20% 30%;」みたいなのだと起こる。

画像サイズが大きいと起こる

んでこの四角い黒いの、起こるときもあれば起こらない時もある。画像によって違うような挙動。うーん…わからん。

ワードプレスにアップロードした画像で特に起こりやすく、反対にbloggerにアップロードした画像では起こりづらい。

おおよそ10KBくらいの画像なら黒くならないけど、10KB超えだすと黒くなる。

backgroundにしても起こる

しょうがないからimgで画像入れるんじゃなくてbackgroundに入れるか、とするも同じく周りが黒くなる。

divで囲んでも黒くなる

うーん、なら画像そのものをborder-radiusするんじゃなくて、画像をいったんdivで囲んでそのdivに「border-radius」と「overflow:hidden;」すればさすがにいけるだろう、としてみる。

けどこれでもやっぱり黒くなる。

解決方法がない…

といろいろ試したけど結局border-radiusとjpeg画像、そしてアンドロイド端末をめぐる不具合は解決せず。うーんモヤモヤする。

またアンドロイド端末上を開発者ツールでデバッグするってのもやってみたけど、黒いのが出ない画像、出る画像で特に違うところはない。別にbackground-colorが黒になってることもなく。

真相は闇の中、、、。

【どどん!】ラムネグではただいまアプリを絶賛提供中!さあ、選べる3つの無料アプリ!あなたはどれにする?

【わたガチャ】

あなただけのガチャを作ろう♪

すたーと!

【みんガチャ】

みんなで一つのガチャを作りあげよう♪

すたーと!

【litty-リティ】

秘密のメッセージをフォロワーさんに送っちゃおう!

すたーと!