JS неправильно считает высоту блока с текстом на некоторых телефонах и старом планшете

Задача отображать пролистывание текста на статическом полноэкранном фоне с уезжанием фона при окончании пролистывания, если текста меньше, чем на экран.

Для устранения скачка фона во время перехода к статическому отображению при скролле создается и собственно скроллится клон содержимого < body >, что позволяет задавать преСкролл фунциональность и таким образом исправить проблему.

PTSE_Body_Clone_Pre_Scroll_Function_List.push(function(){

    $(".body-content-wrapper .ptse-fullscreen-image-with-sliding-text-scene").each(function( scene_index ){...

Для вычисления момента когда текст начинает уезжать с экрана используется

$(this).outerHeight()

На десктопном Хроме и на одном телефоне отображается как надо, но проверял еще на двух телефонах и старом планшете, то показывает криво.

Дебажил вывод на планшете, получается неправильно считает высоту блока с текстом. Пробовал считывать значение не через jQuery а непосредственно из JS, выходит то же самое.

Если через css ставить фиксированную высоту блока с текстом, проблема решается, но задача состоит в том, чтобы блок растягивался содержимым.

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

Ссылка на страницу с указанной ошибкой: https://templates.itf.in.ua/

HTML, в котором возникает ошибка:

<div class="ptse-fullscreen-image-with-sliding-text-scene"> 
        <div class="ptse-fiwsts-intro ptse-scene ptse-adapted-to-window-height" style="background-image:url(img/intro.jpg)">    
        </div>  
        <div class="ptse-fiwsts-text ptse-fiwsts-right-sided ptse-scene">
            Много текста
        </div>
        
</div>

JS:

PTSE_Body_Clone_Pre_Scroll_Function_List.push(function(){

    $(".body-content-wrapper .ptse-fullscreen-image-with-sliding-text-scene").each(function( scene_index ){
    
        if( window.scrollY > $(this).offset().top )
        {               
            $('.ptse-fiwsts-fixed-background[scene_index='+ scene_index +']').css("display","block");
            $('.ptse-fiwsts-intro[scene_index='+ scene_index +']').css("visibility","hidden");
                    
            if( ($(this).offset().top + $(this).outerHeight()) < ( window.scrollY + window.innerHeight ) )
            {
                $('.ptse-fiwsts-bottom-background[scene_index='+ scene_index +']').css("display","block");                  
            }
            else
            {   
                $('.ptse-fiwsts-bottom-background[scene_index='+ scene_index +']').css("display","none");                   
            }               
        }
        else
        {
            $('.ptse-fiwsts-intro[scene_index='+ scene_index +']').css("visibility","visible");
            $('.ptse-fiwsts-fixed-background[scene_index='+ scene_index +']').css("display","none");
        }               
    });
});

и

$(window).scroll(function(){

    for(var i = 0; i < PTSE_Body_Clone_Pre_Scroll_Function_List.length; i++ )
    {
        PTSE_Body_Clone_Pre_Scroll_Function_List[i]();
    }
    $('.body-content-wrapper-clone').css('top',-window.scrollY);    
    
});

CSS:

.ptse-fiwsts-left-sided
{
    margin-right:40%;
}
.ptse-fiwsts-centered
{
    margin:0 auto 0 auto;
    width:40%;
}
.ptse-fiwsts-right-sided
{
    margin-left:40%;
}
.ptse-fiwsts-text
{
    background:white;
    padding:20px;
}
@media screen and (max-width: 1000px)
{
    .ptse-fiwsts-left-sided, .ptse-fiwsts-centered, .ptse-fiwsts-right-sided
    {
        margin:0;
        width:auto;
    }
}
.ptse-fullscreen-image-with-sliding-text-scene
{
    position:relative;
}
.ptse-fiwsts-fixed-background
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:none;
    z-index:-1;
}
.ptse-fiwsts-bottom-background
{
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    z-index:-1;
    display:none;
}
.ptse-fiwsts-intro, .ptse-fiwsts-fixed-background, .ptse-fiwsts-bottom-background
{
    background-size: cover;
    background-position:center;         
}

Ответы (1 шт):

Автор решения: Алексей Кононович

Нашёл причину ошибки.

Высота перестает правильно определяться при клонировании, причем у клонированного блока просчитывается как следует. Видимо, баг jQuery.

Исправляется при помощи назначения в $(document).ready() и $(window).resize() неправильно тянущимся элементам высоты из клонированного блока.

→ Ссылка