Android2.3でoverflow: hidden;とborder-radiusを同時に指定した時にborder-radiusが効かない

Androidでborder-radiusが効かなくなる現象に遭遇したので、原因と対応方法をメモしておきます。

サンプルコード

不具合の発生したコードです。
.boxにoverflow: hidden;とborder-radiusを指定してマスクを行い、中のimgをposition: absoluteで位置を動かしています。

HTML

<div class="box">
	<img src="image.jpg" width="240" height="180" alt="" />
</div>

CSS

.box {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
	margin: 50px auto;
	border-radius: 50px;
}
.box img {
	position: absolute;
	top: -40px;
	left: -70px;
}

これをAndroid2.3で確認すると、overflow: hidden;は効いているのですが、角丸が取れていました。
対応前のデモページ
　

imgのposition: absolute;が原因かと思い、一旦外してみました。

CSS

.box {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
	margin: 50px auto;
	border-radius: 50px;
}
.box img {
/*	position: absolute;
	top: -40px;
	left: -70px;*/
}

これで確認してみましたが、最初と状態は変わりませんでした。
position: absolute;を外したデモページ
　

次に.boxのposition: relative;を外してみました。

CSS

.box {
/*	position: relative;*/
	width: 100px;
	height: 100px;
	overflow: hidden;
	margin: 50px auto;
	border-radius: 50px;
}

これで確認してみると、角丸が適用された状態になっていました。
position: relative;を外したデモページ
overflow: hidden; + border-radius + position: relative; で角丸が取れてしまうようです。
　

今回は中のimgの位置をずらしたかったので、positionの代わりにtransform: translate();を使用してみます。

CSS

.box {
	width: 100px;
	height: 100px;
	overflow: hidden;
	margin: 50px auto;
	border-radius: 50px;
}
.box img {
	-webkit-transform: translate(-70px, -40px);
	transform: translate(-70px, -40px);
}

これで問題ないかと思ったのですが、確認してみると角丸が取れてしまっていました。
transform: translate();で位置をずらすデモページ
overflow: hidden; + border-radius と中の要素にtransform: translate()を指定した場合にも、角丸が取れてしまうようです。
　

最終的に、marginで位置をずらして対応しました。

CSS

.box {
	width: 100px;
	height: 100px;
	overflow: hidden;
	margin: 50px auto;
	border-radius: 50px;
}
.box img {
	margin: -40px 0 0 -70px;
}

margin位置をずらすデモページ
　

【参考サイト】

• [CSS3] border-radius + overflow:hidden の角丸が取れる | WebTecNote