Почему мой jQuery может работать только тогда, когда перед кодом размещено предупреждение?

Question

Этот вопрос также написан с тревожной продолжительностью, потому что я подумал, что это может быть хорошим обучающим моментом и для других новичков.

Цель состоит в том, чтобы создать сомнительные угловые маркеры вокруг изображения, здесьВот как это должно выглядеть:

Для этого у меня сначала есть ограничивающая / все охватывающая div, затем 2 пустых div s, затем изображение. Ограничивающий div стилизован под некоторые стилистики box-shadowing и отступы, 2 пустых div должны выступать в качестве масок над ограничивающим div и под изображением;т.е.:

Следует отметить, что высота изображения является переменной;где - то, откуда изначально возникла сложность.

Первоначально я пытался «маскировать» без 2 пустых div s, используя псевдоэлементы CSS :before & :after. Решение этой проблемы предпочтительнее, немного легче и чище в моих глазах, но использование% на вертикальных полях не оправдывает ожидания. «Вертикально-перекрестная маска» легко достижима. Вот некоторые CSS, работающие без ошибок:

.vert-review-image-cross-block {
    background: white;
    position: absolute;
    width: 70%;
    height: calc(100% + 12px);
    left: 50%;
    margin-left: -35%;
    top: -6px;
}

Однако сделать то же самое для «горизонтального» маскирующего блока не получится. Использование% в атрибуте margin-top не работает, потому что по причине, которая превышает мой интеллект, CSS не поддерживает это и вычисляет% по ширине. Поэтому следующий CSS не правильно центрирует поле маскирования по оси 'y':

.horiz-review-image-cross-block {
    background: white;
    position: absolute;
    height: 70%;
    width: calc(100% + 12px);
    top: 0;
    left: -6px;
    margin-top: 15%;
}

Высота отображается правильно, как 15% от высоты ограничительной рамки. Но опять же, использование% в полях использует только ширину. Тогда я решил использовать JS (jQuery) для управления DOM - убрать margin-top в CSS и добавить его с помощью JS. Это также поддерживает необходимость пустых div с, поскольку JS не может влиять на псевдоэлементы. Ниже, по идее, должно работать нормально. Это немного на многословной стороне, я не пытался рефакторинга, потому что он не ведет себя должным образом (вызывается в document.ready() функции):

function reviewImageHorizMaskMargin() {
    let reviewMediaImageBoxHeight = $(".review-media-image-box").height();
    $(".horiz-review-image-cross-block").css({"margin-top": (reviewMediaImageBoxHeight + 10) * 0.15 + "px"});
}
reviewImageHorizMaskMargin();

Но это не сработало, примененное поле было крошечным,Поэтому я добавил кучу console.logs, чтобы посмотреть, что случилось:

function reviewImageHorizMaskMargin() {
    console.log("$('.review-media-image-box').height()[1]: " + $(".review-media-image-box").height());
    let reviewMediaImageBoxHeight = $(".review-media-image-box").height();
    console.log("reviewMediaImageBoxHeight: " + reviewMediaImageBoxHeight);
    console.log("$('.review-media-image-box').height()[2]: " + $(".review-media-image-box").height());
    $(".horiz-review-image-cross-block").css({"margin-top": (reviewMediaImageBoxHeight + 10) * 0.15 + "px"});
    console.log("$('.review-media-image-box').height()[3]: " + $(".review-media-image-box").height());
}
reviewImageHorizMaskMargin();

Результат был некорректным, как и ожидалось:

$('.review-media-image-box').height()[1]: 22
reviewMediaImageBoxHeight: 22
$('.review-media-image-box').height()[2]: 22
$('.review-media-image-box').height()[3]: 22

Затем я добавил alert и что-то магическоеслучилось:

...
console.log("$('.review-media-image-box')[1]: " + $(".review-media-image-box").height());
alert("$('.review-media-image-box')[1]: " + $(".review-media-image-box").height());
let reviewMediaImageBoxHeight = $(".review-media-image-box").height();
...

Предупреждение было то, что я ожидал, вывод консоли ... не так много:

$('.review-media-image-box').height()[1]: 22
reviewMediaImageBoxHeight: 234
$('.review-media-image-box').height()[2]: 234
$('.review-media-image-box').height()[3]: 234

Так как же получается, что функция alert «искрится», чтобы высота была правильной, и, следовательно, поле отображалось правильно?