Why would images in the Mootools Multibox have scrollbars the FIRST time they are shown?

We are using Mootools Multibox to display images.

The first time we view it with Chrome and Safari, the images are zoomed in and have scrollbars. When we reload the page, the images display correctly without scrollbars.

What could be the cause of this?

How can we fix this so that the images are displayed with their correct sizes the fir开发者_如何学Gost time viewed in Chrome and Safari?

in this block of code:

showContent: function(){
    this.box.removeClass('MultiBoxLoading');
    this.removeContent();
    this.contentContainer = new Element('div', {
        'id': 'MultiBoxContentContainer',
        'styles': {
            opacity: 0,
            width: this.contentObj.width,
            height: (Number(this.contentObj.height)+this.contentObj.xH)
        }
    }).inject(this.box,'inside');

it sets with width of the content box to the contentObj.width direct. which is fine if the browser has the image in the cache - at which point it will work but not so fine when it does not.

it uses Asset.js to load an image here:

load: function(element){
    this.box.addClass('MultiBoxLoading');
    this.getContent(element);
    if(this.type == 'image'){
        var xH = this.contentObj.xH;
        this.contentObj = new Asset.image(element.href,{onload:this.resize.bind(this)});
        this.contentObj.xH = xH;
    }else{
        this.resize();
    };
},

the problem is, only after the onload fires does the browser know the actual width and height of the image (available through this.width / this.height if not bonund to class scope). although this will return an image object early (into contentObj), it probably shouldn't just yet and should do it after the onload fires. the onload here should be what injects the image into the container and sets width and height to host it. instead, it applies this.resize(image)

i hope this gives you some ideas as to how to refactor the class to make it work better.

ADDITONALLY: var xH = this.contentObj.xH; and this.contentObj.xH = xH; -> element storage for other elements direct into the object? this pre-dates mootools 1.2 which introduced closure based uid specific storage per element. bad practice, can cause slowness in IE, memory leaks etc.

refactor to this.contentObj.store("xH", something) with this.contentObj.retrieve("xH") to get it back