div
を含む角が丸い親がありますcanvas
:
<div id="box">
<canvas width="300px" height="300px"></canvas>
</div>
#box {
width: 150px;
height: 150px;
background-color: blue;
border-radius: 50px;
overflow: hidden;
}
キャンバスは、親をオーバーフローする赤い四角形をレンダリングします。予想通り、これはすべてのブラウザーで得られるものです。
問題:
ただし、Mac OS ライオン (私は Safari 5.1.5 と Chrome 19 をテストしました) で実行されている Webkit ブラウザーの場合、キャンバスはまだ丸い角に表示されます。
興味深いことに、この問題は内部要素が の場合にのみ発生するようcanvas
です。その他の子要素の場合、コンテンツは正しく非表示になります。
1 つの回避策は、キャンバス自体に同じ丸みを帯びた角を適用することですが、キャンバスの相対位置をアニメートする必要があるため、残念ながらこれは不可能です。
機能するはずの別の回避策は、角の丸い形状に似た切り取られた領域でキャンバスを再描画することですが、よりクリーンな CSS3 ソリューションをお勧めします。
それで、Mac上のSafariとChromeでこれを修正する方法を知っていますか?
編集:Win7のChromeでも問題が発生します