Javascript 使用jquery添加的图像未显示在webkit浏览器中

我使用jquery创建了一个图像节点，并希望在原始图像的基础上显示一个更大的版本。
复制的图像不会显示在Chrome和Safari中，但可以在Internet Explorer和Firefox中使用。控制台不报告错误。检查器显示克隆的图像元素的所有正确的css属性，但给元素一个0 x 0像素的大小

我没有看到任何css规则会提示0x0大小

下面是一个说明情况的屏幕截图 （）

以下是演示该行为的链接，请尝试使用firefox和chrome单击图像：

---

编辑：

创建元素的Javascript代码：

$('.streamcontent').on('click', 'img.clickable', function () {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width,
        h = img.height;
    img = $(img).addClass('bigger');

    var tw = $(this).width();
    var th = $(this).height();

    var pos = $(this).position();
    var center = {
        top: pos.top + th / 2,
        left: pos.left + tw / 2
    };

    img.css({
        position: 'absolute',
        top: pos.top,
        left: pos.left,
        width: tw,
        height: th,
        opacity: 0
    }).animate({
        top: center.top - h / 2,
        left: center.left - w / 2,
        height: h,
        width: w,
        opacity: 1
    }, 300, function () {
        $('body').one('click', function () {
            img.animate({
                top: pos.top,
                left: pos.left,
                width: tw,
                height: th,
                opacity: 0
            }, function () {
                img.remove();
            });
        });
    });
    $(this).parent().append(img);

});

在JS代码中

$('.streamcontent').on('click', 'img.clickable', function() {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width, h = img.height;
    img = $(img).addClass('bigger');
    ...

我想你必须改变

var w = img.width, h = img.height;

借

因为宽度和高度是物体图像的函数，但我不确定。

找到了

有一个CSS规则指定了最大大小（使用

max width

和

max height

），我需要覆盖该规则以允许更大的图像。。。变得更大

为此，我用一个高得离谱的值（999999999 px）重写了max width&height。该值似乎使“webkit渲染器图像大小计算”崩溃，使图像大小保持在0 x 0。将该值设置为9999px解决了问题

---

我不知道这是否符合webkit bug的条件

chrome 21.0和IE 10.0.84中的页面对我来说都是一样的（图像看起来很好）。奇怪的是，我得到了

chrome 21.0.1180.83 m

：/@maxpraffery只是出于好奇，你有64位版本的chrome吗？（打开任务管理器，在进程选项卡中搜索

chrome.exe

。查看进程名称旁边是否有

*32

）@Roman我的chrome版本为32位。我以为宽度和高度是图像属性？抱歉，我刚刚发现了问题所在。似乎我在另一个CSS规则中使用了“太大的值”，在渲染引擎中溢出了一些内容。我现在正在写答案。

var w = img.width(), h = img.height();