webkit系でborder-radiusを利用していたら行き詰まった件

今ちょっとしたサイトを作っているのですが、HTMLコーディング中に困ったことが。

CSS3のプロパティでborder-radiusがあります。要素を角丸にできるやつですね。
widthとheightを正方形にしてborder-radius:50%で設定すると丸い円に切り抜けます。
その中の要素をtransformでスライドさせていたのですがChromeとSafariで角丸が消えるバグが・・・

positionで動かすとバグる

スライドする瞬間、中の子要素がはみ出ちゃうんですね。
これには困りました。

結果としてはmarginを利用すると角丸解除されずに綺麗にスライドされました！

別サイトの「オレのWEBPAD」へ円に切り抜いた要素内をスライドさせる方法の記事を書きました。

webkit系でborder-radiusプロパティを使いスライドをした場合のバグ回避方法