IE9: circle text not centered

[AmazingDreams]

IE9: circle text not centered

[kimmobrunfeldt]

Hmm, that should be already done.

I set translate(-50%, -50%) with utils.setStyle function which deals with browser prefixes:

// element is <p>
utils.setStyle(element, 'transform', 'translate(-50%, -50%)');

utils.js

var PREFIXES = 'webkit moz o ms'.split(' ');
function setStyle(element, style, value) {
    for (var i = 0; i < PREFIXES.length; ++i) {
        var prefix = capitalize(PREFIXES[i]);
        element.style[prefix + capitalize(style)] = value;
    }

    element.style[style] = value;
}

so it will set:

element.style[msTransform] = 'translate(-50%, -50%)'

[AmazingDreams]

I added a console.log(JSON.stringify(element.style) there and it outputs:

{"0":"position","1":"top","2":"left","3":"padding-top","4":"padding-right-value","5":"padding-bottom","6":"padding-left-value","7":"padding-left-ltr-source","8":"padding-left-rtl-source","9":"padding-right-ltr-source","10":"padding-right-rtl-source","11":"margin-top","12":"margin-right-value","13":"margin-bottom","14":"margin-left-value","15":"margin-left-ltr-source","16":"margin-left-rtl-source","17":"margin-right-ltr-source","18":"margin-right-rtl-source","19":"transform","WebkitTransform":"translate(-50%, -50%)","OTransform":"translate(-50%, -50%)","MsTransform":"translate(-50%, -50%)}

Note the "MsTransform":"translate(-50%, -50%). Are those capitalizations later turned into html style notations? (ie. MsTransform -> -ms-transform)

[kimmobrunfeldt]

Yes the browser prefixes are added like that in JS. Now that I think of it, it might be that ms was an exception in the naming convention

[AmazingDreams]

How can they not be :)

[kimmobrunfeldt]

Fixed in release 0.8.1: https://github.com/kimmobrunfeldt/progressbar.js/releases/tag/0.8.1