Question

I create an image node with jquery and want to show it as a bigger version on top of the original.
The copied image does not show up in Chrome and Safari, but works in Internet Explorer and Firefox. The console does not report errors. The inspector shows the the cloned image element with all the right css properties, but gives the element a 0 x 0 pixels size.

I don’t see any css rules that would hint to a 0x0 size.

here is a screenshot illustrating the situation

(https://i.stack.imgur.com/AhiPf.png)

here is a link to demo the behaviour, try clicking on the image with firefox and chrome:
download.toastlab.ch/segtest

---

edit:

the Javascript code that creates the element:

$('.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

Found it.

There is a CSS rule that specifies a maximum size (with max-width and max-height), I needed to override that rule to allow the bigger image… to be bigger.

To do this I overwrote max-width & height with a ridiculously high value (999999999px). It seems like this value crashed the “webkit renderers image size calculation”, leaving the image size at 0 x 0. Setting the value to 9999px resolved the problem

I don’t know if this qualifies as webkit bug or not.