Posted on 2019-07-10

Fix blurry font after translate %


function roundCssTransformMatrix(element){
        var el = document.getElementById(element);
        var mx = window.getComputedStyle(el, null); //gets the current computed style
        el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
            mx = mx.getPropertyValue("-webkit-transform") ||
            mx.getPropertyValue("-moz-transform") ||
            mx.getPropertyValue("-ms-transform") ||
            mx.getPropertyValue("-o-transform") ||
            mx.getPropertyValue("transform") || false;
console.log('before:', mx)
        var values = mx.replace(/ |\(|\)|matrix/g,"").split(",");
console.log('after replace:', values)
        for(var v in values) {  values[v]=Math.ceil(values[v]);  }
console.log('after ceil:', values.join())
el.style.transform = "matrix("+values.join()+")"
        //$("#"+element).css({ transform:"matrix("+values.join()+")" } );
}


from https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry/42256897#42256897