IE width / height problems when loading dynamic content

[Rasmus Wollesen]

Hey there. 

I am using fancybox on an application i am working on, to show a users information: http://alarmhjaelp.dk/test/#redirect=login.html

Now, i am reloading the elements inside my fancybox iframe when people click links from within. 

In Chrome the wrapper fit the content perfectly and is just dandy. 

In IE (11) it just craps up when i try to hit one of the links to a new page. 

The code i am using. 

//Activate the fancybox element

jQuery(".fancybox").fancybox({

        //Only used on the very first element loaded, not when clicking a link inside the iframe

beforeShow: function(){

jQuery(".fancybox-iframe").load(function(){

jQuery(this).hide();

})

this.width = jQuery('.fancybox-iframe').contents().find('fieldset').outerWidth(true);

this.height = jQuery('.fancybox-iframe').contents().find('fieldset').outerHeight(true);

},

        //This is where we set the size of the iframe when new content is loaded. Or atlease attempt to
        onUpdate: function(){

//To avoid the clunky transition, we hide it untill we need it again

jQuery('.fancybox-wrap').css({marginLeft: '-10000px'}); 

//Problems with mobile devices messing up with the resize event, makes for a this line of code

jQuery(".fancybox-iframe").contents().find('a, input[type="submit"]').on('click', function(){

jQuery(this).unbind();

jQuery.fancybox.update();

})

var elementWidth = jQuery('.fancybox-iframe').contents().find('fieldset').outerWidth(true);

var elementHeight = jQuery('.fancybox-iframe').contents().find('fieldset').outerHeight(true);

if(this.width != elementWidth && this.height != elementHeight)

{

this.width = elementWidth;

this.height = elementHeight;

jQuery.fancybox.update();

}

else{

//Bring back the stuff to view

jQuery('.fancybox-wrap').css({marginLeft: '0px'}); 

//As the content is loaded before the resize has happend, we wait to show it until after rezing

jQuery(".fancybox-iframe").show();

}

},

afterClose: function(){

//Remove elements from the localstorage - OBS - this will conflict with an "remember me" function

localStorage.clear();

},

autoResize:true,

autoScale:true,

openEffect: "elastic",

closeEffect: "elastic",

transitionIn: "elastic",

transitionOut: "elastic",

nextEffect: 'elastic',

prevEffect: 'elastic',

type:'iframe',

});

Anyone have any ideas why IE is being so sad to work with when it works fine in Chrome?

Thanks in advance!

[Rasmus Wollesen]

Found the problem.

I was hiding the content when loading new content to make the transition more smooth. 

That was where IE forgot evertything about the content and returned 0 as height / width.

I got it fixed by setting the opacity to 0 during the transition.