javascript - Google Chrome は、更新後にのみ css スタイルを正しく表示します

Question

現在、画像をWebページに表示するためにJavaScriptでスクリプトをコーディングしています。これらの画像は ajax リクエストで読み込まれ、css スタイルは jquery から直接適用されます。このスクリプトは firefox/Opera/IE で動作しますが、Google Chrome では CSS が正しく表示されません。

Google Chrome で HTML ページをデバッグすると、コードは正しく、画像には適切な CSS スタイルが含まれています。css エディター パネルで属性のチェックを外してチェックすると、chrome はスタイルを更新し、すべての要素を正しく表示します。

コードは以下に表示されます

function displayCroppedFace(faceData, parentElem) {
    var randomid = Math.floor(Math.random() * Math.pow(2, 32));
    $("#" + parentElem).append("<div id=\"faceImg_border_" + randomid + "\" />");
    $("#faceImg_border_" + randomid).append("<div id=\"faceImg" + randomid + "\" />");
    $("#faceImg" + randomid).attr('class','cropped_model');
    $('#faceImg' + randomid).append('<img id="faceImg' + randomid + '_img" src="' + faceData.image_url + '"/>');
    $('#faceImg' + randomid + '_img').load(function() {
        crop($(this), faceData.x, faceData.y, faceData.w, faceData.h);
    });
}

function crop(imgObj, x, y, width, height) {
    var originalWidth = imgObj.width();
    var originalHeight = imgObj.height();
    var scale_x = imgObj.parent().width() / (width + 20);
    var scale_y = imgObj.parent().height() / (height + 20);


    imgObj.css({
        'position' : 'absolute',
        'display' : 'block',
        'left' : (-x * scale_x - 5) + 'px',
        'top' : (-y * scale_y - 5) + 'px',
        'width' : (originalWidth * scale_x + 10) + 'px',
        'height' : (originalHeight * scale_y + 10) + 'px',
        'z-index' : '10'
    });
}

faceData画像の URL と 4 つの座標 (x、y、w、h) を含む JavaScript オブジェクトです。

Google Chrome の問題と、このエラーを修正する方法を知っている人はいますか?

Answer 1

問題が解決しました！エラーは CSS にありました。