The jquery.smartWizard plugin includes a function called fixHeight that adjusts the height of a wizard step. It is utilized when displaying a step for the first time or revealing hidden divs within the step. The function works correctly in IE and FireFox, but in the latest version of Chrome, there is a discrepancy where the outerHeight value is significantly smaller than expected, by more than 100 pixels.
Below is the original function:
SmartWizard.prototype.fixHeight = function(){
var height = 0;
var selStep = this.steps.eq(this.curStepIdx);
var stepContainer = _step(this, selStep);
stepContainer.children().each(function() {
if($(this).is(':visible')) {
height += $(this).outerHeight(true);
}
});
// These values (5 and 20) are experimentally chosen.
//stepContainer.height(height);
//this.elmStepContainer.height(height + 12);
stepContainer.animate({ "height": height - 12 }, 500);
this.elmStepContainer.animate({ "height": height }, 500);
alert(window.outerHeight);
}
I have made adjustments to incorporate animations into the final steps. However, the issue persists whether using Chrome or not.
EDIT: I have created a fiddle to showcase the difference between IE and Chrome. When you click on 'member' and then 'non-member', you will notice different height values displayed in each browser. http://jsfiddle.net/xjk8m8b1/
EDIT2: Another fiddle has been provided to demonstrate how both browsers initially show the same height values until calculating visible elements, where Chrome's calculations veer off track. http://jsfiddle.net/xjk8m8b1/2/