Google Chrome ではてなスターコメントの出現位置がおかしい件とその原因

Google Chrome ではてなスターコメントの出現位置がおかしい

こんな感じ

原因は Ten.js の以下の箇所

    getMousePosition: function(pos) {
        // pos should have clientX, clientY same as mouse event
        if ((navigator.userAgent.indexOf('Safari') > -1) &&
            (navigator.userAgent.indexOf('Version/') < 0)) {
            return {
                x: pos.clientX,
                y: pos.clientY
            };
        } else {
            var scroll = Ten.Geometry.getScroll();
            return {
                x: pos.clientX + scroll.x,
                y: pos.clientY + scroll.y
            };
        }
    },

この if 文は、 Safari 2 系かどうかを見ているんだが、 'Safari' という文字列があって 'Version/' という文字列がないかどうかを判断基準にしてしまっている。
そして、 Google Chrome には Version/ という文字列が含まれていない（僕の環境では）。
なので、 Google Chrome = Safar 2 系という判定をされて、 event.client[XY] を意図しない値として扱う。
これはいけない＞＜

レンダリングエンジンを見るべき

オープンソースなブラウザでは、ブラウザのバージョンで判定してはいけない。
レンダリングエンジンのバージョンで判定すべきだ。（自戒も込めて）
なので、 Safari という文字を見てはいけない。あくまでレンダリングエンジン AppleWebKit という文字を見るべき。
なので、 Safari 2 以前かどうかを知りたければ以下のようにするのがいい。

var m;
if ((m = navigator.userAgent.match(/AppleWebKit\/(\d+(\.\d+)?)/)) && m[1] < 500) {
    alert('Safari 2 Compat');
}
else {
    alert('Modern');
}

バージョン判定は uai.js が参考になる

http://homepage2.nifty.com/magicant/sjavascript/uai-spec.html
JavaScript-XPath でもお世話になっています

あと

この例の場合に限っては、 page[XY] があったらそっち使うって判定を入れてもいい気がする。ただ、保守性の問題か。