getComputedStyle 宽度和高度在真实 Android 设备上的chrome webview 中不起作用

Question

I had this javascript function:

function onFontLoad(cb,font,size,table,interval)
{
var div=document.createElement("div");
div.style.fontFamily=font;
div.style.fontSize=size;
div.style.position="absolute";
div.style.top="-100px"
div.style.left="-100px"
document.body.appendChild(div);
var checkInterval=setInterval(function()
{
    for(character in table)
    {
        div.textContent=character;
        var t=table[character];
        var s=getComputedStyle(div);
        if(parseInt(s.width)!=t[0]||parseInt(s.height)!=t[1]) return;
    }
    div.parentNode.removeChild(div);
    clearTimeout(checkInterval);
    cb();
},interval||200);

And it worked since webview in android was based on webkit. Since WebView was changed to chromium my function stop working even in Chromium browser. I got suggestion to use Math.ceil with rounding, and also avoid using parseInt.

Now I have this function:

function onFontLoad(cb, font, size, table, interval) {
var div = document.createElement("div");
div.style.fontFamily = font;
div.style.fontSize = size;
div.style.position = "absolute";
document.body.appendChild(div);
var getRawPixels = function (cssUnit) {
    // Round up to the highest unit.
    var re = /([\d.]+)(px)/; // css measure units.
    var results = cssUnit.replace(re, "$1");
    return Math.ceil((results * 10) / 10) ;
};
var checkInterval = setInterval(function () {
    for (var character in table) {
        div.textContent = character;
        var t = table[character];
        var s = getComputedStyle(div);
        if (getRawPixels(s.width) != t[0] || getRawPixels(s.height) != t[1]) return;
    }
    div.parentNode.removeChild(div);
    clearTimeout(checkInterval);
    cb();
}, interval || 200);

And function works like intended now in Chromium browser or in Android (starting 4.4 to 6 emulators) and I have no problem with webview rendering in emulators. But its blank on some real devices, even without webview hardware acceleration.(mostly android 5.x devices) But I'm pretty there is no problem with canvas rendering, since if I comment or remove this string:

  if (getRawPixels(s.width) != t[0] || getRawPixels(s.height) != t[1]) return;

Webview will start render as intended again even with real android devices I test application with, but without applying style from onFontLoad function.

Another thing I found in process is that broken webview in Chrome Developer Tools adds <i> after div. But same code running in emulator displaying canvas nicely and there no any <i> after div. However I can broke canvas in emulator if I remove string with div position. And after this doom action I'll see <i> in page source code after div too.

Also, I found that Chromium had some issues with getComputedStyle in past too. But I think getComputedStyle is working ok.

Answer 1

It was something with div hiding. I just removed hiding, since after hiding div destroyed itself with application in canvas. Simplicity really a key there.

function onFontLoad(cb, font, size, table, interval) {
    var div = document.createElement("div");
    div.style.fontFamily = font;
    div.style.fontSize = size;
    //div.style.position = "relative";
    document.body.appendChild(div);
    var checkInterval = setInterval(function () {
        for (var character in table) {
            div.textContent = character;
            var t = table[character];
            var s = getComputedStyle(div);
        }
        clearTimeout(checkInterval);
        cb();
    }, interval || 200);
}