添加jquery的图像没有在webkit浏览器中显示

Question

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

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

这里是截图说明情况 （http://i.stack.imgur.com/AhiPf.png）

这里是一个链接到演示的行为，尝试一下与Firefox和Chrome在图像上： download.toastlab.ch/segtest

---

编辑：

创建元素的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); 

}); 

Answer 1

找到它。

有一个CSS规则指定了最大尺寸（使用max-width和max-height），我需要覆盖该规则以允许更大的图像...更大。

要做到这一点，我用高得离谱的高值（999999999px）覆盖了最大宽度&高度。这样看来，价值坠毁的“WebKit的渲染图像大小计算”，使图像大小为0×0.7的值设置为9999px解决了问题

我不知道这是否有资格作为WebKit的错误或不。

Answer 2

在您的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(); 

改变

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

因为宽度和高度都是在对象图像功能，但我米不确定。