Error When focus input on Iphone browser

[Kency 2 Likes (Newbie)]

When I focus Input on browser Iphone,  screen auto scroll but on PC or android it normal. Do you have any solution? Thanks.

You can view from: RPReplay_Final1657298657.mp4 - Google Drive

[SteveS 131 Likes (Specialist)]

This is because the keyboard is shortening the screen which in turn is messing with the progress value of the scrollTrigger you are using for the horizontal scroll.

Try some combination of .normalizeScroll() and ScrollTrigger.config({ ignoreMobileResize: true });

[GreenSock 16,923 Likes (Superhero)]

That sounds right. But you may need to disable the auto refresh on resize because the ignoreMobileResize: true only ignores the change if it's within a certain percentage of the viewport height (intended for address bar show/hide). So maybe: 

ScrollTrigger.config({ 
  autoRefreshEvents: ScrollTrigger.isTouch === 1 ? "visibilitychange,DOMContentLoaded,load" : "visibilitychange,DOMContentLoaded,load,resize" 
});

 

[Kency 2 Likes (Newbie)]

Thanks all. I will try.

[Kency 2 Likes (Newbie)]

2 solutions not working

[Cassie 4,220 Likes (Superhero)]

Do you have a minimal demo Kency?

We'll be more able to help then.

[Kency 2 Likes (Newbie)]

19 hours ago, Cassie said:

Do you have a minimal demo Kency?

We'll be more able to help then.

Sorry, I use in project so quite difficult recreated, Currently I use disable and enable ScrollTrigger to resolve a problem although it not pretty. Thanks

[GreenSock 16,923 Likes (Superhero)]

Well if you ever want some help chasing this down, just create a minimal demo with a few <div> elements and some inputs and show us how to recreate it and we'd be happy to take a peek. You don't need to use your actual project. In fact, it's MUCH better if you just isolate it in the most basic way possible in a CodePen. But if you're fine with the results you're getting now by disabling it and you don't have time/motivation to do the minimal demo, that's okay.