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

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">

[gla69]

めっっっっちゃ助かる

[i_mairy]

あとでよむ

[webpad]

webkit,バグ,CSS3,border-radius