前書いたiOSのSafariで幅計算がおかしくなる件、もうちょい調査してみた。

どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。

「あ」の文字のspan要素のoffsetWidthをJSで取得するデモ。

DEMO

これiPhoneで見るとこうなる。

なんかIEでもfont-sizeが11px指定のときに12pxで表示されるというバグがあった気がするけど、このバグはさらに凶悪で、フォントサイズは指定したサイズになるけどoffsetWidthだけ指定のサイズより大きくなるというもの。それであのようなずれが生じるみたいです。

JSでoffsetWidthの値の変化がとれるということはバグがあるかどうか判定できそうだということでやってみた。

var mbFontsizeWidthCalcBug = (function(doc) {
    var body = doc.body;
    var span = doc.createElement('span');
    var width = {};
    var i = 10;

    span.style.position = 'absolute';
    span.style.visibility = 'hidden';
    span.innerHTML = 'あ';
    body.appendChild(span);

    for (;i < 13; i++) {
        span.style.fontSize = i + 'px';
        width[i] = span.offsetWidth;
    }

    body.removeChild(span);
    body = span = null;

    return (width[12] === width[11] && width[11] - 1 === width[10]);
})(document);

DEMO

とりあえず判定はできるっぽい。これでModernizrみたいにhtml要素とかにclassつければなんとかCSSで分岐できそうではある。が、うーん。。。