I'm currently working on a JavaScript script to showcase images on a webpage. These images are loaded using an AJAX request and a CSS style is directly applied using jQuery. The script functions correctly on Firefox, Opera, and IE, but Google Chrome is not displaying the CSS properly.
When I inspect the HTML page using Google Chrome, the code appears correct and the images have the appropriate CSS style. However, if I uncheck and check an attribute in the CSS editor panel, Chrome refreshes the style and displays all the elements correctly.
Below is the code snippet:
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 is a JavaScript object that includes an image URL and four coordinates (x, y, w, h).
Does anyone know what the issue might be with Google Chrome and how to go about fixing this error?