border-radiusを利用して丸に切り抜いた要素の中身をマウスホバーでスライドさせたかったのですが、ChoromeとSafariでのみ角丸が解除されました。
数時間格闘した結果、単純な方法で回避ができ、理想通りの丸で切り抜いた要素の中身をスライドさせることが出来ました。

webkit系でborder-radiusを利用した場合のバグ

border-radiusへoverflow:hidden;でハミ出し防止したり、中の要素をpositionやCSS3のtransformを使うとアニメーションするタイミングで角丸が解除されます。

FirefoxとIEは問題ありませんでした。

border-radiusで丸の要素を作る

要素を球体にすること自体はとても簡単で、下記のプロパティを指定することで実装できます。

HTMLソース

<div id="wrap">
<p class="slide">テキストテキスト</p>

</div>

CSSプロパティ

/*球体の親要素*/
div#wrap{
width:100px;
height:100px;
background:red;
overflow:hidden;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

こんな感じ

角丸の中の要素をtransformを利用してマウスホバーのスライドさせる

positionで位置を変えた場合、FirefoxはアニメーションしないのでCSS3のtransformを利用します。
CSSにアニメーションを追記すると以下のソースになります。

/*球体の親要素*/
div#wrap{
width:100px;
height:100px;
background:red;
overflow:hidden;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

/*中身の子*/
p.slide{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div#wrap:hover p.slide{
-webkit-transform: translate(0,-70px);
-moz-transform: translate(0,-70px);
transform: translate(0,-70px);
}

こうなる

どうでしょうか。Firefoxでは正常に丸の中身がスライドしていますがChromeとSafariではアニメーション中に子要素の角丸が解除されています。

ハックを使いブラウザごとにプロパティを変えてみましたがSafariがどうあがいても無理でした。なので次にmarginを試して見ました。

border-radiusで切り抜いた要素の中をスライドさせる方法

marginは要素を押すためのプロパティですがマイナス値を入れることができます。

それを利用してスライドさせます。

以下の用にCSSを修正しました。

/*球体の親要素*/
div#wrap{
width:100px;
height:100px;
background:red;
overflow:hidden;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

/*中身の子*/
p.slide{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div#wrap:hover p.slide{
margin:-70px 0 0 0;
}

マージンを利用した結果

いかがでしょうか。

Firefox、Chrome、Safariのブラウザで角丸が解除されずにスライドが出来ました。

Webkit系はpositionとoverflow:hiddenを使うことでborder-radiusが解除されてしまう。

ならばmarginを使って凹ましたれ！という結果に落ち着きました。

これに気がつくのに結構時間がかかりました・・・