outerHeight in Chrome giving wrong value, OK in IE and FireFox

Question

In the jquery.smartWizard plugin, there is a function called fixHeight which adjusts the height of a wizard step. This is used when a step is first displayed or when revealing hidden divs within the step. It works fine in IE (at least in IE 11 on Win8.1) and in FireFox. But, in the latest version of Chrome (Version 40.0.2214.94 m) the outerHeight is a much smaller value than it should be, by over 100 pixels or more.

This is the function, out of the box:

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 modify the final steps to add the animation. With or without Chrome fails.

EDIT: Here is a fiddle that demonstrates the difference between IE and Chrome. Click member, then click non-member. You will see that second set of values is different in each browser. http://jsfiddle.net/xjk8m8b1/

EDIT2: Here is another fiddle that shows both browsers get the same values for height until you try and calculate the visible elements. Then Chrome is way off. http://jsfiddle.net/xjk8m8b1/2/

You should provide sample to replicate your issue as a jsFiddle **and** all relevant code/CSS/HTML markup in question — A. Wolff, Feb 02 '15 at 16:35
Maybe your issue is just because you aren't waiting for all content to be fully rendered — A. Wolff, Feb 02 '15 at 16:37
I've tried wrapping in a window load event, page load, and even added a delay, none of which make any difference. — Connie DeCinko, Feb 02 '15 at 16:41
I've added another fiddle which shows the issue more simply. — Connie DeCinko, Feb 02 '15 at 20:51

score 2 · Answer 1 · answered Feb 02 '15 at 21:58

While not the best solution, I did figure out the issue. Firefox and IE are both adding up the height of everything in the div, include break tags and anything that creates vertical space. Chrome, in my opinion is broken, and not adding up these extra elements! It is not returning a true value for consumed vertical space.

My workaround is to wrap the contents of the div inside another dummy div. This way jquery looks at the height of that first child div and correctly returns the height.

Chrome doesn't consider `
` elements to be visible, even it is impacting the flow content. `Chrome, in my opinion is broken`: i tend to be agree — A. Wolff, Feb 02 '15 at 22:57

score 0 · Answer 2 · edited Nov 18 '20 at 03:29

0

I have the same problem, a ScrollBar is in the middle, the StepContainer never fixes the height.

Then I change this line in jquery.smartwizard.js:

$this.elmStepContainer.height(_step($this, selStep).outerHeight());

To this:

$this.elmStepContainer.height(_step($this, selStep).outerHeight() +20);

20 is enough for me, and my problem is gone.

edited Nov 18 '20 at 03:29

cela

2,352
3
21
43

answered Nov 17 '20 at 21:42

marcoartica

32
1
6

outerHeight in Chrome giving wrong value, OK in IE and FireFox

2 Answers2

Linked