Trouble with Safari and Firefox on desktop with ScrollSmoother
I'm using the latest version of gsap with ScrollSmoother. All is fine on Chrome desktop, but as soon as I introduce ScrollSmoother:
ScrollSmoother.create({
smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
effects: true, // looks for data-speed and data-lag attributes on elements
smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
});
...Firefox and Safari
You've got these CSS styles that are causing the problem:
html {
overflow-y: hidden;
height: 100vh;
}
I was a bit confused, though, because both the CodePen and your post-gazette.com demos behaved identically in Chrome, Safari, and Firefox for me. It sounded like you thought it was only an issue in Firefox and Safari?
ScrollTrigger is totally fine to use on mobile. I'm not sure what you mean by "inconsistent page loading". The main issue on some mobile devices simply has