添加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; 

因爲寬度和高度都是在對象圖像功能，但我米不確定。