mobile problem safari - paralax effect image jumps when adress bar hides

[bujutsu1 1 Likes (Newbie)]

Hey community!

I made a really simple parallax effect with Scrolltrigger using scrub.

 

On desktop it works fine but on mobile - Safari - the image jumps when the Adress bar hides/comes back into view.

I also can see the markers jump.

 

here is my code:

 

gsap.fromTo(

imageRef.current,

{

yPercent: -20,

autoAlpha: 1,

},

{

yPercent: 20,

ease: "none",

autoAlpha: 1,

 

scrollTrigger: {

trigger: imageRef.current,

scrub: true,

markers: true,

},

}

);

 

 

any hints on how to fix this?

 

 

thank you already!

 

have a great weekend!

 

 

[GreenSock 18,885 Likes (Superhero)]

It's pretty difficult to troubleshoot blind (without a minimal demo), but I'd recommend trying this:

ScrollTrigger.config({ ignoreMobileResize: true})

 

And maybe: 

ScrollTrigger.normalizeScroll(true);

If you still need help, please make sure you provide a minimal demo. 

 

Good luck!

[bujutsu1 1 Likes (Newbie)]

thank you so much!!! I don't know why i didn't find that in the docs sorry!

 

ScrollTrigger.config({ ignoreMobileResize: true });

 

did the trick!

[Diego Gnoatto 5 Likes (Newbie)]

for those those need to fix this in the future and are using scrollsmoother,i fixed the same issue by setting the code as follows:

now the mobile browser don't refresh if scrolldown(default native behavior)

and the jumpy address bar is fixed at all times(don't show/hide)anymore

its buttery smooth.

 

// in the css

#smooth-content {

  position: absolute;

  display: grid;

  overflow: visible;

  min-height: 100vh;

}

// and in the javascript BEFORE SETUP THE SCROLLTRIGGER

ScrollTrigger.normalizeScroll(true) // enable

 ScrollTrigger.config({

    limitCallbacks: true,

    ignoreMobileResize: true,

 })