Problems with Scrolltrigger only on IOS mobile

[Demain]

Hello Guys,

im very new to Javascript & GSAP.

I have tested some things on a Testpage See here  (not responsive yet) and here are the  files:

HTML

 

IMG

 

CSS

 JS FILE

on Desktop and Android everything works fine ! Only on IOS mobile (Safari & Chrome on IOS)  when u open the Testpage See here the scrollTrigger is not working correct. Between the Sections i have WHITE SPACE see in this screenvideo SCREENVIDEO

i testet so many things, only solution for now what have worked is :

ScrollTrigger.normalize.Scroll (this works on IOS but looks weird!

Is there anything i can do , or i'm doing something wrong ?

ps: pls i don´t know how to do a DEMO on Codepen or something like this ( all Files linked ) thank your for helping.

See the Pen by test (@test) on CodePen.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

Is really hard for us to do a lot without a minimal demo (emphasis on minimal), but I had a quick look at your CSS and found this:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: baseline;
  font-family: 'Rosario-Regular', Arial, Helvetica, sans-serif;
  font-size: 100%;
  scroll-behavior: smooth !important; /* <- HERE! */
}

You have scroll-behavior: smooth in all those selectors, including the html and body elements. Definitely remove that and see what happens.

 

Happy Tweening!

[Demain]

30 minutes ago, Rodrigo said:

Hi,

 

Is really hard for us to do a lot without a minimal demo (emphasis on minimal), but I had a quick look at your CSS and found this:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: baseline;
  font-family: 'Rosario-Regular', Arial, Helvetica, sans-serif;
  font-size: 100%;
  scroll-behavior: smooth !important; /* <- HERE! */
}

You have scroll-behavior: smooth in all those selectors, including the html and body elements. Definitely remove that and see what happens.

 

Happy Tweening!

Hey, thank you for your answer,
first i thougt this is the Problem , but wenn comment that out , nothing changes...

U checked the testsite from my link ?

[Rodrigo]

Hi,

 

I checked the link on an iPad running iOS 17 on chrome and safari and I can't see anything wrong with it. That demo is not using normalizeScroll() though, since the address bar hides/show when you swipe down/up. Be sure to check the docs on that regard:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Other option you could try is ignoreMobileResize in the ScrollTrigger global config:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()

ScrollTrigger.config({ ignoreMobileResize: true, });

Once again, without a minimal demo that clearly illustrates the issue is really hard for us to see what could be the problem.

 

Happy Tweening!

[Demain]

6 minutes ago, Rodrigo said:

Hi,

 

I checked the link on an iPad running iOS 17 on chrome and safari and I can't see anything wrong with it. That demo is not using normalizeScroll() though, since the address bar hides/show when you swipe down/up. Be sure to check the docs on that regard:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Other option you could try is ignoreMobileResize in the ScrollTrigger global config:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()

ScrollTrigger.config({ ignoreMobileResize: true, });

Once again, without a minimal demo that clearly illustrates the issue is really hard for us to see what could be the problem.

 

Happy Tweening!

Thank you , 

 

I know because normalizescroll is not in that test site for now. I have problems on the phone ( when u check the screen video) u will see white spaces between each sections. (Without normalizescroll)
 

I can only solve this problem for now by implementing normalizescroll( but looks not so nice on desktop then) 

 

is there an option for only implementing normalize scroll on mobile devices / or breakpoints? Or bring back smooth scroll on desktop ? 
 

tommorow i will make a test site on codepen then maybe we can find the problem.

[Rodrigo]

5 hours ago, Demain said:

is there an option for only implementing normalize scroll on mobile devices / or breakpoints? Or bring back smooth scroll on desktop ? 

Yep, you can use ScrollTrigger's isTouch property in order to known the device being used:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

You can combine that with GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Maybe something like this:

if (ScrollTrigger.isTouch === 1) {
  ScrollTrigger.normalizeScroll(true);
}

In combination with MatchMedia:

const mm = gsap.matchMedia();

mm.add("(max-width: 1024)", () => {
  if (ScrollTrigger.isTouch === 1) {
    ScrollTrigger.normalizeScroll(true);
  }
});

That would be for screens below most tablets in landscape.

 

Hopefully this helps.

Happy Tweening!

[Demain]

22 hours ago, Rodrigo said:

Yep, you can use ScrollTrigger's isTouch property in order to known the device being used:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

You can combine that with GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Maybe something like this:

if (ScrollTrigger.isTouch === 1) {
  ScrollTrigger.normalizeScroll(true);
}

In combination with MatchMedia:

const mm = gsap.matchMedia();

mm.add("(max-width: 1024)", () => {
  if (ScrollTrigger.isTouch === 1) {
    ScrollTrigger.normalizeScroll(true);
  }
});

That would be for screens below most tablets in landscape.

 

Hopefully this helps.

Happy Tweening!

Ohhhhh Yeees my friend ,

 

this absolutely works perfect for me ! Thank you thank you thank you ? 

 

have an nice day ✌?✌?✌?