GSAP and Lenis layout shift.

[thesoldiersway]

It's an old problem that there are articles about since more than ten years or longer. That mobile browser developers don't fix it is absurd because it limits the design of web pages. As I read, there are thousands of people who are disappointed. The problem is the layout shift on mobile when you scroll down and the address field disappears. The website makes an unpleasant jump then, which can also be noticed in this demo. Scroll down to the text and up and you will see it. It gets even worse if you have a 3d model, parallax or something else on the website. There are various solutions online but none of them really work. I don't mind the address field on the mobile. Some web designers like Anderson Mancini also have fixed address bar but he builds in app. Should I choose between a jumping, layout-shifting web page or a visible address field, I of course choose the address field. To bypass the layout shift, I found a code on GSAP that works. Also tested it on this demo and Lenis has become even smoother scrolling. I added the code on the bottom of the html code before the body tag. Try it,

<script> ScrollTrigger.config({ ignoreMobileResize: true}) ScrollTrigger.normalizeScroll(true); // enable </script>

[13papatya]

Can you add this code to the style.css and give a try?
html, body {scroll-behavior: auto;}