Im building a web application using react js.
I have one button when I click it I want to scroll to last div of the page.
In every browser things works just fine but in safari(desktop and mobile) scrolling causes jumping of page or laggy(in mobile)
here is how I simulate scrolling(just for testing purposes)(I use other libraries to animate scroll but same effect even with them :
https://prnt.sc/k2yks8
html, body, #root {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: none;
}
first div is fixed div
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding-top: 40px;
padding-left: 40px;
padding-right: 40px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
and other divs around 4-5 are with position relative
—
here is video how what is happening in safari desktop :
https://streamable.com/waed9
Thanks !