Okay so i've already asked the question but i had no satisfactory answers so i'm asking it again with some changes.

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
const charWeight = 50;
let velocity = 1;
let fall = true;

setInterval(gravity, 10)

function gravity() {
        let Y = persoId.offsetTop;

        velocity += acceleration / 100;

        persoId.style.top = +Y + velocity + "px";

        collisions = true;

        //! DEBUGGING
    }

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

//* HITBOX


let collisions = true;

function coll() {
    if (collisions) {
        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) {
            velocity = 0;
        }
        requestAnimationFrame(coll);
    }
}

coll();

Now, the probleme is, as you can see in the images, the character clips a bit through the hitbox and doesn't stop as soon as it touches. It results in a lot of problems for jumping and stuff like that cuz it think the character is inside the hitbox. I believe this is because it skips some pixel when the function update due to the fact that the player touches the ground at a velocity of around 13px/s.

Other variables:

let persoY = persoId.offsetTop,
    persoX = persoId.offsetLeft,
    persoW = persoId.offsetWidth,
    persoH = persoId.offsetHeight,
    islandY = islandHitbox.offsetTop,
    right = false,
    left = false,
    x = 9950,
    y = 4950,
    air = false,
    land = true,
    hitbox = false,
    islandHb = document.getElementById("islandHitbox"),
    map = document.getElementById("map"),
    persoVar = document.getElementById("persoId"),
    screenLog = document.querySelector('body');

const acceleration = 9.81;