@Kryptonit

Почему на мобильной версии браузера некорректно отображается getBoundingRect()?

Делал небольшую анимацию и столкнулся с проблемой, на Desktop всё корректно отображается в консоли, как только переключаюсь на мобильную версию, getBoundingRect да и другие стандартные функции работают через раз, изменяют свои значения только после того, как пролистну элемент, из-за этого анимация включается когда уже элемент давно позади
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    some text
    <div class="arrs-about-us">
        <div class="arrs-special-block">
            <img class="arr-about-us" src="./rows-png/row1.png"></img>
            <img class="arr-about-us" src="./rows-png/row2.png"></img>
            <img class="arr-about-us" src="./rows-png/row3.png"></img>
            <img class="arr-about-us" src="./rows-png/row4.png"></img>
            <img class="arr-about-us" src="./rows-png/row5.png"></img>
            <img class="arr-about-us" src="./rows-png/row6.png"></img>
            <img class="arr-about-us" src="./rows-png/row7.png"></img>
            <img class="arr-about-us" src="./rows-png/row8.png"></img>
            <img class="arr-about-us" src="./rows-png/row9.png"></img>
            <img class="arr-about-us" src="./rows-png/row10.png"></img>
        </div>
    </div>
    some text
    <script src="./script.js"></script>
</body>
</html>


function rowsAnimation(flag){
    if(document.querySelector('.arrs-about-us').getBoundingClientRect().top - document.documentElement.clientHeight < 0 && !flag){
        for(let i = 1; i<=10; i++){
            setTimeout(()=>{ArrayOfRows[i-1].classList.add('arr-active')}, i * 200)
        }
        flag = true;
    }
}

document.addEventListener('DOMContentLoaded', (e)=>{
    var flag = false;
    ArrayOfRows = document.querySelectorAll('.arr-about-us');
    document.addEventListener('scroll', (e)=>{
        setInterval(()=>{
            console.log(document.querySelector('.arrs-about-us').getBoundingClientRect().top)
        }, 1000)
        rowsAnimation(flag)
    });

    if(document.querySelector('.arrs-about-us').getBoundingClientRect().top-window.pageYOffset+300 < 0){
        console.log(window.scrollY);
        rowsAnimation(flag)
        
    } 
})


body{
    height: 5000px;
    justify-content: center;
    align-items: center;
}
.arrs-about-us{
    position: relative;
    margin-top: 1000px;
    overflow: hidden;
    height: 591px;
    width: 1322px; 
    border: 2px green solid; 
    background-color: #141A2D;
}
.arrs-special-block{
    display: flex;
    position: relative;
    justify-content: space-around;
    align-items: end;
    width: 100%;
    height: 100%;
}
.arr-about-us{
    position: relative;
    bottom: -100%;
    width: 60px;
    max-height: 100%;
    transition: all 1s;
    
}
.arr-active{
    bottom: 0;
}
@media(max-width: 1277px){
    .arrs-about-us{
        height: 457px;
        width: 1015px; 
    }
    .arrs-special-block{
        left: -40%;
    }
    .arr-about-us{
        margin: 0 17px;
        width: 35px;
        
    }
}
@media(max-width: 760px){
    .arrs-about-us{
        height: 800px;
    }
    .arrs-special-block{
        bottom: 0;
        height: 457px;
        position: absolute;
        width: 638px;
        left: calc( (100vw - 638px) / 2);
        
    }
    .arr-about-us{
        margin: 0 20px;
        width: 32px;
        transition: all 1s;
        
    }
}


вот прям всё перепробовал: десктоп - да, мобилки - нет
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
FFxSquall
@FFxSquall
Могу писать код, могу не писать
Частенько с таким сталкивался в свое время. Пришел к тому, что такое поведение только с открытым dev tools. Думаю это из-за определенных оптимизаций, для корректной работы dev tools. Вычисление getBoundingRect оптимизируется и происходит реже. Информацию о таком поведении найти не удалось. Но при тестировании на реальных устройствах (с легированием на сервер), все данные были корректными. Как только открывалась консоль разработчика, происходили задержки (проблемы были с setInterval или RAF внутри которого вызывался getBoundingRect)

P.S. Не помню точно, но в FireFox проблемы либо не было, либо она проявлялась не так сильно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
тут столько ошибок что непонятно как оно может хоть где-то работать.
CSS правила вроде justify-content и align-items работают только для flex контейнеров/элементов
body используется в связке с html
элемент .arrs-about-us должен находиться в relative контейнере
flag = true; изменяет переданный аргумент, а не глобальную переменную
малопонятные таймауты которые никак не синхронизированы - getBoundingClientRect() возвращает DOMRect который содержит значения, актуальные на момент создания объекта т.е. это не live объект, а "снимок состояния"
img - void тег
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы