WebKit系ブラウザでcanvasタグがborder-radiusを無視する時がある

非常にささいな話なのですが、COSUMIの囲碁対局ゲームの碁盤は、ほんの少しだけ角を丸めています。ところが特定の環境では、HTML5版の方の碁盤の角が全く丸くならないことに気づきました。

オンライン囲碁ゲーム COSUMI
http://www.cosumi.net/

少し調べたところ、このバグが原因のようです。

css – How to hide canvas content from parent rounded corners in any webkit for Mac? – Stack Overflow
http://stackoverflow.com/questions/10616668/how-to-hide-canvas-content-from-parent-rounded-corners-in-any-webkit-for-mac

要約すると、「WebKit系ブラウザにおいて、指定されたwidth属性とheight属性の積が66000以上のcanvasタグが、border-radiusを無視する時がある」ということのようです。リンク先では「canvasタグの親要素に指定されたborder-radius」という話になってますが、COSUMIではcanvasタグ自体にborder-radiusが指定されています。ちなみに私の環境では、Win7+ChromeとNexus7+Chromeはだめ、iPad3+SafariとiPad3+Chromeは大丈夫でした。

COSUMI側でも簡単に修正することができますが、これは明らかにブラウザ側のバグだと思われますので、とりあえずこのまま放置します。たぶんそのうち直るでしょう。

No Comments »

No comments yet.

Leave a comment


ご気軽にコメントしてください。ただし、すべてのコメントに返信をお約束するものではありませんのでご了承ください