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

COSUMIのFlashがきれいに拡大・縮小するようになりました

COSUMIの囲碁対局ゲームでページ全体を拡大・縮小した時などに、Flashががたがたせずに滑らかに拡大・縮小するようになりました。

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

「なんでこんなにがたがたしちゃうんだろう」と、以前からかなり気にはなっていたのですが、「できることは全部やってるはずだし、こんなものなのかな」と、もうほとんどあきらめてました。ところがここにきて、その理由がわかった!

ActionScript 2.0のMovieClip.attachBitmapメソッドは、4番目の引数smoothingで、画像を滑らかに拡大・縮小するかを指定することができます。この項目は省略可能なんですが、省略した時のデフォルトはtrueだと自分の手元にあった日本語の公式のリファレンスに書いてあるんですよ。で、これが嘘でした…(泣) デフォルトはfalseです。公式のリファレンスにもいろいろなバージョンがあるのかもしれませんが、ちゃっと調べた感じ、英語の方には正しく載ってるみたいなんですけどね。ほんと、なんでこうなるの…