javascript – 添加了jquery的图像未在webkit浏览器中显示

2023年9月15日 177次阅读

我使用
jquery创建一个图像节点,并希望将其显示为原始版本之上的更大版本.

复制的图像不会显示在Chrome和Safari中,但可以在Internet Explorer和Firefox中使用.控制台不报告错误.检查器显示具有所有正确css属性的克隆图像元素,但为元素提供0 x 0像素大小.

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

这是一个说明情况的屏幕截图

(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);

});

最佳答案 找到了.

有一个CSS规则指定最大大小(具有最大宽度和最大高度),我需要覆盖该规则以允许更大的图像…更大.

要做到这一点,我覆盖了max-width&身高高得离谱(999999999px).看起来这个值崩溃了“webkit渲染器图像大小计算”,使图像大小保持为0 x 0.将值设置为9999px解决了问题

我不知道这是否符合webkit bug.

点赞