I'm making a videogame in javascript (without canvas because it's an assignement and teacher forbid us to us canvas). I'm making the hitbox right now and i run into some bug. the one i wanna talk about is this one:

When i load the page the character spawns in the air and fall due to a gravity function:

//* GRAVITY

let force = setInterval(gravity, 10);

let fall = true;

function gravity(){
    if(fall){
        // loop that multiplie the velocity by 1.05 until it's at 40
        if (gforce < 20) gforce = gforce * 1.05;

        // Apply gravity to character
        persoY = persoY + gforce;
        persoId.style.top = persoY + 'px';

        //! debugging
        console.log(gforce);
    }
}

Then when it touches the ground it stops falling because of my hitbox function:

let touch = true;

function coll(){
    if(touch){
        let persoY = persoId.offsetTop,
            persoX = persoId.offsetLeft,
            persoW = persoId.offsetWidth,
            persoH = persoId.offsetHeight,
            islandY = islandHitbox.offsetTop,
            islandX = islandHitbox.offsetLeft,
            islandW = islandHitbox.offsetWidth,
            islandH = islandHitbox.offsetHeight;
        if (persoX < islandX + islandW &&
            persoX + persoW > islandX &&
            persoY < islandY + islandH &&
            persoY + persoH > islandY) {
            fall = false;
        } else {
            fall = true;
        }
    }
    requestAnimationFrame(coll);
}
coll();

Now the problem is that when the page load and the player fall there's a 50% chance he stop falling right when he touches the hitbox like in Picture 2 or another 50% chance that he clips a bit through the hitbox before he stops falling like in Picture 1 And i really can't understand why pls help me thx u already.