Observer

[Huy Nguyen 2K]

Hi, I have a question about observer of gsap that is if I use preventDefault: true in observer this mean it will block address bar on mobile right? But when I use safari to test, I see the address bar not blocking and I don't know why while it works fine on android devices. Thank you!

[Rodrigo]

Hi,

 

What particular iOS device are you testing?

 

This example works the same on Safari/Chrome on an iPad running iOS 16:

See the Pen abQEQBv by GreenSock (@GreenSock) on CodePen

 

Here is the debug URL (no iframes):

https://cdpn.io/pen/debug/abQEQBv

 

If you keep having issues please create a minimal demo and be specific about the device and iOS version you're testing on.

 

Finally you could try using ScrollTrigger's normalizeScroll method:

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

 

If you use ScrollTrigger normalizeScroll you can use ScrollTrigger.observe as well, since it's basically the Observer Plugin that is baked into ScrollTrigger, so there is no need to add both plugins:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe()

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Just to be clear, preventDefault is intentionally not documented because it's not supposed to be relied on in all situations to call preventDefault() on the event. It's mostly for internal use, not part of the public API. There are some edge cases where it doesn't call event.preventDefault() (and again, that is very intentional). And iOS has quite a few scroll-related bugs and you cannot consistently force it to prevent the address bar from showing/hiding. I've noticed that on iPhones, for example, it's almost impossible to prevent whereas on iPads you can prevent it (at least in most situations I've seen). Again, this has nothing to do with GSAP/Observer - it has to do with limitations and bugs in the browser itself. ScrollTrigger.normalizeScroll(true) is our best attempt and normalizing scroll behavior but it's not a silver bullet. 

[Huy Nguyen 2K]

9 hours ago, GreenSock said:

Just to be clear, preventDefault is intentionally not documented because it's not supposed to be relied on in all situations to call preventDefault() on the event. It's mostly for internal use, not part of the public API. There are some edge cases where it doesn't call event.preventDefault() (and again, that is very intentional). And iOS has quite a few scroll-related bugs and you cannot consistently force it to prevent the address bar from showing/hiding. I've noticed that on iPhones, for example, it's almost impossible to prevent whereas on iPads you can prevent it (at least in most situations I've seen). Again, this has nothing to do with GSAP/Observer - it has to do with limitations and bugs in the browser itself. ScrollTrigger.normalizeScroll(true) is our best attempt and normalizing scroll behavior but it's not a silver bullet. 

See the Pen oNdNLxL?editors=1010 by GreenSock (@GreenSock) on CodePen

In this example, I use onPress in observer to prevent scrolling behavior on safari and it works fine but at this time I can't to interact with elements in DOM. Is anyway to resolve this problem? Thank you!

[GreenSock]

15 hours ago, Huy Nguyen 2K said:

In this example, I use onPress in observer to prevent scrolling behavior on safari and it works fine but at this time I can't to interact with elements in DOM. Is anyway to resolve this problem? Thank you!

You can't really have it both ways - either you preventDefault() on the event (which kills interactivity) or you don't. So I think your only option here is to run some logic in the onPress to see if the event's target is something that you want to allow clicks on (like buttons, links, etc.) and if so, don't call preventDefault().