webkit border-radiusとposition absoluteを組み合わせると不具合


例えば、border-radiusを設定したdivの中で、overflow:hiddenを使用するdivを入れたりすると、radiusしたはずなのに角丸にならない。

1
2
3
4
5
6
7
8
9
10
11
12
13
.outer{
  position: relative;
  border-radius: 30%;
  width: 200px;
  height: 200px;
  background:#dedede;
  overflow: hidden;
}
.inner{
  width: 70px;
  height: 70px;
  background:#98de45;
}
1
2
3
<div class="outer">
  <div class="inner"></div>
</div>

webkitのバグらしい。

これを回避するには、外のdivを2重にする。

1
2
3
4
5
6
.border{
  overflow: hidden;
  border-radius: 30%;
  width: 200px;
  height: 200px;
}
1
2
3
4
5
<div class="outer">
  <div class="border">
    <div class="inner"></div>
  </div>
</div>

直った。
しかし、ここで小さいボックスをposition: absoluteなどで動かすとまた同じバグが発生する。

1
2
3
  position: relative;
  left: 130px;
  top: 130px;

これをどうにかするには、positionで移動をやめて、marginで移動させてしまう!

1
2
  margin-left: 130px;
  margin-top: 130px;

まじかよ・・・。

実際の動作はこちら