externalHeight в Chrome дает неправильное значение, OK в IE и FireFox

В плагине jquery.smartWizard есть функция fixHeight, которая регулирует высоту шага мастера. Это используется при первом отображении шага или при обнаружении скрытых разделов внутри шага. Он отлично работает в IE (по крайней мере, в IE 11 на Win8.1) и в FireFox. Но в последней версии Chrome (версия 40.0.2214.94 m) значение externalHeight намного меньше, чем должно быть, более чем на 100 пикселей или более.

Это функция из коробки:

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);

}

Я изменяю последние шаги, чтобы добавить анимацию. С Chrome или без него не получается.

EDIT: Вот скрипка, которая демонстрирует разницу между IE и Chrome. Щелкните член, затем щелкните не член. Вы увидите, что второй набор значений отличается в каждом браузере. http://jsfiddle.net/xjk8m8b1/

EDIT2: Вот еще одна скрипка, которая показывает, что оба браузера получают одинаковые значения высоты, пока вы не попытаетесь вычислить видимые элементы. Тогда Chrome далеко. http://jsfiddle.net/xjk8m8b1/2/


javascript google-chrome jquery css smart-wizard
person Connie DeCinko    schedule 02.02.2015    source источник
comment
Вы должны предоставить образец для воспроизведения вашей проблемы в виде jsFiddle и всего соответствующего кода/CSS/HTML-разметки, о которой идет речь.   -  person A. Wolff    schedule 02.02.2015
comment
Возможно, ваша проблема связана с тем, что вы не ждете, пока весь контент будет полностью отрендерен.   -  person A. Wolff    schedule 02.02.2015
comment
Я пытался обернуть событие загрузки окна, загрузку страницы и даже добавить задержку, но все это не имеет никакого значения.   -  person Connie DeCinko    schedule 02.02.2015
comment
Я добавил еще одну скрипку, которая более просто показывает проблему.   -  person Connie DeCinko    schedule 02.02.2015

Ответы (2)


arrow_upward
2
arrow_downward

Хотя это и не лучшее решение, я разобрался с проблемой. Firefox и IE суммируют высоту всего в div, включая теги разрыва и все, что создает вертикальное пространство. Хром, на мой взгляд, ломается, и не складывается эти лишние элементы! Он не возвращает истинное значение потребляемого вертикального пространства.

Мой обходной путь - обернуть содержимое div внутри другого фиктивного div. Таким образом, jquery просматривает высоту первого дочернего элемента div и правильно возвращает высоту.

person Connie DeCinko    schedule 02.02.2015
comment
Chrome не считает элементы <br> видимыми, даже если это влияет на содержимое потока. Chrome, in my opinion is broken: я склонен согласиться - person A. Wolff; 03.02.2015

arrow_upward
0
arrow_downward

У меня та же проблема, ScrollBar находится посередине, StepContainer никогда не фиксирует высоту.

Затем я меняю эту строку в jquery.smartwizard.js:

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

К этому:

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

20 мне достаточно, и моя проблема исчезла.

person marcoartica    schedule 17.11.2020