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

最終更新日：2020/11/14

ラムネグから一言：寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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

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

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

発生環境

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

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

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

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

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

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

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

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

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

真相は闇の中、、、。

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.