スマホ実機(iOS Safari)でborder-radiusが効かないときの対処法

スマホ実機(iOS Safari)でborder-radiusが効かないときの対処法 CSS

ブラウザのエミュレーターで確認するとborder-radiusがちゃんと効いているのに、スマホ実機(iOS Safari)で確認すると効いていないという現象が起こりました。

その対処法を備忘録がてら共有しておこうと思います。またハマりそうなので…。

 

スポンサーリンク

スマホ実機のSafariでborder-radiusが効かないときの対処法

対処法は簡単、z-indexを指定するだけです。

.hoge {
  border-radius: 5px;
  z-index: 1; /* ←ここ! */
}

とりあえず指定してあれば大丈夫そうなので値は適宜変えてokです。僕はこれで治りました。

 

スマホ実機でデベロッパーツールで確認してみる

スマホ実機でデベロッパーツールを使ってコードを確認する方法を過去記事で紹介しているので参考程度にどうぞ。

実機で確認しつつコードを見ていくと解決のヒントが見つかりやすいかもです。

>>【iPhone】スマホ実機でデベロッパーツールを使う方法

スポンサーリンク
CSS
スポンサーリンク
でざなり