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()
неправильно тянущимся элементам высоты из клонированного блока.