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