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');
}