iOSにてborder-radiusが効かない問題を解決した話

Tags:

Date: Update:

とある案件にて、GoogleMapを正円で切り抜きたい、という項目があり
いつものごとくcssをこねくり回していたのですが、PCでは問題なく円形で表示がされていました。
一通りコーディングが完了しさてブラウザチェックやるか、とおもむろに開いたiOSにて、

なんでだろうね、四角形でした。

これは..ふざけんなよ..と思いながら1時間ほど格闘の末に
無事に調整をすることができましたのでご査収ください。

 

発生した環境

GoogleMapをiframeで読み込んでいて、
要素の親にラッパーとなるdivを入れていた状態。
(iframeにborder-radiusが使えないことはすでに知っていたので)

<div>
  <iframe src="https://maps.google.co.jp/maps?output=embed"></iframe>
</div>

先に結論

border-radiusに指定した値が
その要素の幅の半分以上の場合、角丸が解除される

ダメなケース

div {
  width: 200px; height: 200px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: 50%; /* これでハマった */
}

成功したケース

div {
  width: 200px; height: 200px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: 49.9%; /* これで動いた */
}

解決までの軌跡

自分のソースを疑う

まあ、スペルミスとかまずは疑いますよね。
iPhone実機をPCに接続し、DeveloperToolにてプロパティを見ると
ちゃんと反映されていることを確認。

ググるとz-indexを指定しないとダメとのこと

iOS(正確にはWebkit?)にて、z-index: 1;を指定するとうまく動いた!
との情報を聞きつけ追加したがビクともせず。

それでも動かない

なので、

  1. transformが一緒に付与されているとダメとのことで解除 > ダメ
  2. opacityがどうたらこうたら > 調整したがダメ
  3. css-maskで対応 > IE対応させないとダメなやつなんです..
  4. svgマスクで対応 > 冗長すぎてパス
  5. 中央に丸型の透過を入れた画像を作る? > もうちょっと頑張りたい

ふとした閃き

「ダメもとでborder-radius: 10px;とかでやってみるか」
との素晴らしい閃きが降りてきたので半信半疑でやってみたところ
角丸の野郎、動いているんですよ。それはもうあっけなく。

最後に

これが誰かの残業を減らすことになれば大変光栄です。
かなりニッチなところですが。。
現場からは以上です。

本日のまとめ

iOS(Webkit?)で角丸が死んでる時は
- z-index: 1を追加
- 円形を表現したい場合、50%以下の値を指定