🧊

Androidの一部端末では、border-radiusで％(パーセント)指定ができない

px指定だと普通に効いてくれます。

直接出くわしたパターンは、before/after疑似要素に対しての指定やったけど、おそらく普通の要素に対しても効かないと思われる。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50% /* <-効かない！ */
}

Q. 50%使えないけど円が書きたい！

A. 自分の幅・高さの半分を指定すればOK！

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px /* Half of width or height! */
}

参考：border-radius - CSS | MDN

参考でもなんでもないけど一応ｗ

いま流行りのSassで書いた版。

@mixin circle($size) {
  width: $size;
  height: $size;
  border-radius: $size/2;
}

/* .... */

.circle {
  @include circle(100px);
}

Androidめぇ・・・

いまさっくり調べなおしたらこんな記事が。

参考：CSSのborder-radiusプロパティを%で指定すると、適用されない機種がある | x-fit - クロスフィット -

Androidめぇ・・・。