i attached a video to better exhibit the behavior ignore the position in the css i was testing something. As you can see when I set overflow-x:hidden; it seems the body takes the size of screen currently being viewed then when you try scrolling it stops as if page ends there but then if i try to scroll again it resolves. But the issue doesn't appear when there is no overflow-x but i need the overflow-x to be hidden bc then i am left with blank space to right side of the page. This code was working completely fine on React but not on NextJS. The css code that i have in global.css is currently

html, body {
    margin: 0;
    overflow-x: hidden;
    background-color: rgb(9,9,8);

}