call007 Posted July 28, 2022 Share Posted July 28, 2022 37 minutes ago, Koyash said: @GreenSock sorry for the late response it's been a busy week, but to answer your question. Yes, even after clearing cache and then going to the url you supplied (https://cdpn.io/pen/debug/poLyVKR) it continues to happen. I've tried on iPhone 7/x/11/13 and all have the same issue so I really don't know why you aren't able to reproduce this. I have the same problem with IPad Pro (12.9-inch) (5th generation) (iOS 15.6). I can try to record a video if you wish. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted July 28, 2022 Share Posted July 28, 2022 10 hours ago, Koyash said: I really don't know why you aren't able to reproduce this. Me neither! So frustrating. I've tried my iPhone and iPad. ZERO problems. No jittering. None. Updated to the latest OS. Still no problems. It just seems like maybe you're loading the old ScrollTrigger file somehow, but you cleared your cache so I guess not. I'm officially perplexed. And yes, a video would be awesome, especially if you could show the ScrollTrigger version proof. I just updated the demo to display the version number on the initial screen. Are you seeing 3.11.0? Link to comment Share on other sites More sharing options...
Mendieta Posted July 29, 2022 Share Posted July 29, 2022 I have stumbled across the same error, @GreenSock or @Cassie how can i install version 3.11.0 with shockingly green npm? i guess its beta. maybe I can confirm that on the codepen link you folks sent the jittering doesnt happen on iphone 13 iOS 15.5 Link to comment Share on other sites More sharing options...
GreenSock Posted July 29, 2022 Share Posted July 29, 2022 3 hours ago, Mendieta said: I have stumbled across the same error, @GreenSock or @Cassie how can i install version 3.11.0 with shockingly green npm? i guess its beta. I sent you access details via DM. 3 hours ago, Mendieta said: I can confirm that on the codepen link you folks sent the jittering doesnt happen on iphone 13 iOS 15.5 So strange, right? I cannot reproduce it either no matter how hard I try. I wonder what's different on our devices? I haven't changed any significant settings at all. 🤷♂️ Link to comment Share on other sites More sharing options...
Mendieta Posted July 29, 2022 Share Posted July 29, 2022 @here for everyone, i ran my project with the 3.11.0 version and the jittering of the pinning is gone! But it has other issues, the markers jitter (jump some pixels when scrolling), im using this config for ScrollSmoother: ScrollSmoother.create({ smooth: 1.2, effects: true, ignoreMobileResize: true, normalizeScroll: true, }); Link to comment Share on other sites More sharing options...
Mendieta Posted July 29, 2022 Share Posted July 29, 2022 After testing a bit more, if i remove ScrollSmoother on iOS all my scrolltriggers work almost perfectly, ive tried ScrollSmoother with ignoreMobileResize, normalizeScroll and smoothTouch(0.1) with all the combinations i could came up, and sadly without ScrollSmoother the scrolling is way smoother. 1 Link to comment Share on other sites More sharing options...
Koyash Posted July 29, 2022 Share Posted July 29, 2022 23 minutes ago, Mendieta said: if i remove ScrollSmoother on iOS all my scrolltriggers work almost perfectly That's the whole issue. ScrollSmoother breaks all ScrollTrigger animations on iOS, without ScrollSmoother it just works. I've tried a lot of things just like you and cannot find a solution except dropping ScrollSmoother all together. As for the solution you suggested: 49 minutes ago, Mendieta said: ScrollSmoother.create({ smooth: 1.2, effects: true, ignoreMobileResize: true, normalizeScroll: true, }); It's already being used in the CodePen demo together with v 3.11.0 and did nothing to resolve it (for me), thanks for the suggestion but I think in this case it's out of our control. Link to comment Share on other sites More sharing options...
GreenSock Posted July 29, 2022 Share Posted July 29, 2022 1 hour ago, Mendieta said: But it has other issues, the markers jitter (jump some pixels when scrolling), im using this config for ScrollSmoother: Yes, the advanced smoothing tactic we're applying to the content is not applied to the markers because that'd be wasteful in terms of CPU/kb (those are only there to sorta help during development and would never be enabled on a deployed site). To be clear, this advanced smoothing tactic is only used on iOS devices to work around several glaring bugs in iOS Safari itself (it misreports positioning while scrolling) and it involves applying/removing a translation on every-other render. 1 hour ago, Mendieta said: sadly without ScrollSmoother the scrolling is way smoother. Just to verify - did you set smoothTouch: false and ALSO gsap.set(smoother.content(), {clearProps: "transform"}) to get rid of the transform and set ScrollTrigger.normalizeScroll(false)? Was that any better? Sorry, folks, I've quite literally burned many hundreds of hours trying to work around these glaring iOS Safari bugs (and reported them to the Safari team but they have been largely silent) - I really wish I could find a clean way around them. I've definitely implemented strategies that smooth over them in various scenarios but apparently not all of them. I still cannot replicate the jitter you're reporting. Not on any of my devices. 1 Link to comment Share on other sites More sharing options...
neilcline Posted July 29, 2022 Share Posted July 29, 2022 just hopping in the thread to +1 I also experience this jittering of a pinned element while using ScrollSmoother in Chrome, as well as Safari, on my iPhone XS Max Link to comment Share on other sites More sharing options...
Mendieta Posted July 29, 2022 Share Posted July 29, 2022 @GreenSock i tried appplying Quote Just to verify - did you set smoothTouch: false and ALSO gsap.set(smoother.content(), {clearProps: "transform"}) to get rid of the transform and set ScrollTrigger.normalizeScroll(false)? Was that any better? and it was indeed better, still the scrolltrigger animations and pinning is better just removing completely ScrollSmoother. I dont think is that much of an issue. Since with those settings we are essentially removing smoothscrolling on mobile devices. The only things lost would be the update of scroll and ability to lock scroll (which are pretty neat) but implementing those with vanilla js is quite simple. And the obvious normalizeScroll (which is also super neat!) I do believe v3.11.0 is way more optimized for iOS browsers, but for now i think ill stick to no smoothscrolling on iOS, scrolltrigger by itself works like a charm. Its a shame the Safari team has not been helpful, specially with such a highly used browser. thanks 1 Link to comment Share on other sites More sharing options...
Koyash Posted July 29, 2022 Share Posted July 29, 2022 2 hours ago, GreenSock said: glaring iOS Safari bugs (and reported them to the Safari team but they have been largely silent) Actually it's not only Safari. 1 hour ago, neilcline said: jittering of a pinned element while using ScrollSmoother in Chrome, as well as Safari, on my iPhone XS Max On 7/28/2022 at 11:48 AM, call007 said: same problem with IPad Pro (12.9-inch) (5th generation) (iOS 15.6). I also experience this on Firefox but not Chrome like @neilcline mentioned. I've tested this on multiple iPhones ranging from 7 to 13 pro max and @call007 also reported this issue on iPads. So I think this is something bigger than just a Safari bug i.e. the way iOS/iPadOS devices interact with different web browsers. In my case Safari itself is the worst offender of them all. It's rare to trigger the jitter on Firefox. Link to comment Share on other sites More sharing options...
GreenSock Posted July 29, 2022 Share Posted July 29, 2022 55 minutes ago, Koyash said: Actually it's not only Safari. Like Cassie said earlier, ALL browsers in iOS use Safari - it's forced by Apple. The other browsers are just wrappers around Safari's core renderer. 😕 2 Link to comment Share on other sites More sharing options...
Koyash Posted July 30, 2022 Share Posted July 30, 2022 10 minutes ago, GreenSock said: Like Cassie said earlier, ALL browsers in iOS use Safari - it's forced by Apple. The other browsers are just wrappers around Safari's core renderer. 😕 Learned something new! But how does this explain me not getting the jitter on the Chrome app? I'm so perplexed by this... Link to comment Share on other sites More sharing options...
GreenSock Posted July 30, 2022 Share Posted July 30, 2022 4 hours ago, Koyash said: But how does this explain me not getting the jitter on the Chrome app? I'm so perplexed by this... Welcome to the club Many things don't make sense in iOS land. 🤷♂️ 1 Link to comment Share on other sites More sharing options...
merlin Posted August 15, 2022 Share Posted August 15, 2022 @GreenSockHey Jack! Any updates on this? I'm experiencing the same on Chrome: Link to comment Share on other sites More sharing options...
coderesolution Posted August 18, 2022 Share Posted August 18, 2022 (edited) Hey all, I'm afraid we're also having the same issues. macOS, Android and Windows are all fine. However, on iOS (Safari, Firefox and Chrome) on various models and versions, we have the same jittering problem whilst scroll (quick preview video: https://cloud.coderesolution.com/ursjkV). We've been able to replicate it on physical devices and BrowserStack, though oddly not on LambdaTest. We're using GSAP v3.10.4. We would love to get help on this, thank you! UPDATE: Changing `smoothTouch` to `0` has fixed it. Since touch devices have native smooth scrolling, I don't think this is bad. Edited August 18, 2022 by coderesolution Solution Link to comment Share on other sites More sharing options...
merlin Posted August 18, 2022 Share Posted August 18, 2022 @coderesolution Some things in our thread may help! 1 Link to comment Share on other sites More sharing options...
Koyash Posted August 19, 2022 Share Posted August 19, 2022 I just updated to 3.11 and for me it's completely fixed on all browser apps (iPhone 13 pro max). 2 Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2022 Share Posted August 19, 2022 🎉💚 Link to comment Share on other sites More sharing options...
Cassie Posted August 19, 2022 Share Posted August 19, 2022 glorious news! Link to comment Share on other sites More sharing options...
Basilico Posted October 26, 2022 Share Posted October 26, 2022 I tried the demo provided here: https://cdpn.io/pen/debug/poLyVKR on an iPhone 6s and I found that the problem happens only when the battery is in "Low power mode". Anyone else? 2 Link to comment Share on other sites More sharing options...
Koyash Posted October 26, 2022 Share Posted October 26, 2022 35 minutes ago, Basilico said: I tried the demo provided here: https://cdpn.io/pen/debug/poLyVKR on an iPhone 6s and I found that the problem happens only when the battery is in "Low power mode". Anyone else? WOW! You're right. I was also able to reproduce this issue with low power mode on (iOS 16.1). Turning low power mode off immediately fixes it so I wouldn't worry too much about this. Good find though! @GreenSock We've returned once again 😅. Link to comment Share on other sites More sharing options...
Basilico Posted October 26, 2022 Share Posted October 26, 2022 31 minutes ago, Koyash said: so I wouldn't worry too much about this Well.. it depends. If the website is heavily based on scrolltrigger it looks like a broken thing. Anyway, probably the reason because the testing was so difficult to debug was due to the battery mode. Link to comment Share on other sites More sharing options...
GreenSock Posted October 26, 2022 Share Posted October 26, 2022 Yeah, Safari is absolutely terrible especially when it comes to scroll - an Apple engineer confirmed that it's literally impossible to get Safari to be synchronized scroll-wise. It misreports scroll position, misreports event.clientY/X, etc. There are at least 5 blatant scroll-related bugs in the browser itself, most of which are impossible to work around. Have you tried using ScrollTriggers' normalizeScroll feature?: ScrollTrigger.normalizeScroll(true); Does that improve things for you at all? We spent many hundreds of hours on that feature alone for iOS and it does indeed work around several of the browser bugs. It's not a silver bullet, though. Sorry - we've tried so hard to work with Apple, find workarounds, and the Apple team just seems uninterested in doing much at all (at least in the past year that we've been actively trying to get their attention). 2 Link to comment Share on other sites More sharing options...
Basilico Posted October 27, 2022 Share Posted October 27, 2022 16 hours ago, GreenSock said: Have you tried using ScrollTriggers' normalizeScroll feature? Does that improve things for you at all? Based on my tests, the normalizeScroll is a problem with Low power mode and it makes it very laggy. I'm developing a project based on scrollTriggers and for the moment I'm going to avoid that feature because "normal" scrollTriggers are working fine. Obviously I'm not going to use ScrollSmoother on mobile too. Thanks for the great effort you put in this library. GSAP is so useful and well done that is a shame the Safari team keeps ignoring these bugs. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now