IE 8 & 9 not resizing container when width set in image.load

Question

To see the issue go to this page and click the next text. The small, medium fullsize text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.

Code (http://moments.qa.chucksoft.com/Scripts/mvc/views/show/Showview.js) Line 154:

 ShowView.prototype.setImageSrc = function (imagesrc) {

  var image = $('img#image');
    image.attr('src', imagesrc);
    image.load(function () {
        var container = $('div#imagecontainer');
        container.fadeIn(200);
        var resizer = new Resizer();
        resizer.resize(this.width, this.height, maxWidth, maxHeight);
        var image = $(this);
        var imageWidth = (resizer.width + 23);            
        container.width(imageWidth);
    });
        image.attr('src', imagesrc);
    };

From what I can tell the container.width(imageWidth); is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.

I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.

I'm at a loss on how to fix this issue. Any insights would be much appreciated.

Update

To clarify, the issue arises when you transition from a landscape image to a portrait image, otherwise everything works as expected.

... ?

Answer 1

I have yet to figure this issue out. I have taken a different direction.