normalizeScroll: momentum killed after attempting to scroll past page bottom (iOS Safari)

March 27

Hi team,

**The problem:** with `normalizeScroll: true` on iOS Safari, when I reach the bottom of the page and flick back up, the scroll starts but stops way too early. The momentum doesn't match the intensity of the flick — a strong upward flick only scrolls a tiny amount before stopping, as if the momentum is being killed at the boundary.

**GSAP:** 3.14.2
**Config:**
js
ScrollTrigger.config({ ignoreMobileResize: true });
ScrollSmoother.create({ smooth: 1, effects: true, normalizeScroll: true, smoothTouch: false });

Steps to reproduce (on iPhone, Safari):

1. Open the minimal demo below
2. Scroll all the way down to Section 5
3. Try to scroll just a little past the bottom (the natural "is there more content?" gesture)
4. Now flick upward with strong intensity
5. Observe: the scroll starts but stops almost immediately — far less distance than the same flick intensity would produce mid-page

Minimal reproduction:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>normalizeScroll boundary test</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { background: #141516; color: #fff; font-family: system-ui; }
    #smooth-wrapper { overflow: hidden; position: fixed; width: 100%; height: 100%; top: 0; left: 0; }
    #smooth-content { overflow: visible; width: 100%; }
    section { height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
    .s1 { background: #1a1a2e; }
    .s2 { background: #16213e; }
    .s3 { background: #0f3460; }
    .s4 { background: #533483; }
    .s5 { background: #e94560; }
  </style>
</head>
<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <section class="s1">Section 1</section>
      <section class="s2">Section 2</section>
      <section class="s3">Section 3</section>
      <section class="s4">Section 4</section>
      <section class="s5">Section 5 — scroll here, then try to flick back up</section>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollSmoother.min.js"></script>
  <script>
    gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
    ScrollTrigger.config({ ignoreMobileResize: true });
    ScrollSmoother.create({ smooth: 1, effects: true, normalizeScroll: true, smoothTouch: false });
  </script>
</body>
</html>

Codepen

Many tks in advanvce!

See the Pen xbEYZdr by fabiaicodepen (@fabiaicodepen) on CodePen.

March 27

1 hour ago, fabigsap said:

5. Observe: the scroll starts but stops almost immediately — far less distance than the same flick intensity would produce mid-page

That's not my experience at all. It actually feels quite natural. It doesn't stop almost immediately for me on my iPhone 15 (or any iOS device I've tried). Do you have a screen recording of the behavior you're seeing? Nobody else has reported behavior like that.

It's very unlikely that ScrollSmoother can perfectly match exactly what iOS normally does. It's our best effort at smoothing out what has been a very broken system on iOS (lots of bugs in the way scrolling and touch events are handled). Sorry if it's disappointing to you, but the current behavior took literally hundreds of hours to produce. You're welcome to disable smooth scrolling or normalized scrolling on mobile if you prefer the native behavior.

March 28

Thanks for looking into it @GreenSock!
Here's the screen recording: https://streamable.com/xdhbam
To reproduce on the CodePen: scroll down to Section 5, then do what users naturally do when they reach the bottom of a site — try to scroll past it a couple of times to check if there's more content. After that, flick back up.
In the video you can see the same flick intensity in both directions: going down, it carries all the way from Section 1 to the bottom. But going back up after "testing the bottom" a couple of times, it barely makes it past Section 5 — it stops somewhere between Section 5 and Section 4, instead of traveling the same distance.
Regarding disabling normalizeScroll on mobile — that's not an option for me since all my pinned/scrubbed sections jitter badly without it (the iOS thread-sync issue). So I need normalizeScroll for smooth pins, which is why I'm reporting this rather than turning it off.

Would love to hear if you can reproduce it on your iPhone 15 with the CodePen.

March 31

Is just me having this issue? It's a problem that follows me in every single website I build

March 31

I am able to reproduce it if I keep trying to scroll down past when it ends. I don't think anyone has noticed or complained about it before because it only affects the first swipe back up (and the user must have specifically tried to scroll further than the page goes, which itself isn't super common), and then on the second swipe it acts normal. We'll try to see if there's some kind of workaround when we have a chance, but I wonder if it's related to something iOS does under the hood or with its event handling. Sorry about the hassle.

April 1

22 hours ago, GreenSock said:

I am able to reproduce it if I keep trying to scroll down past when it ends. I don't think anyone has noticed or complained about it before because it only affects the first swipe back up (and the user must have specifically tried to scroll further than the page goes, which itself isn't super common), and then on the second swipe it acts normal. We'll try to see if there's some kind of workaround when we have a chance, but I wonder if it's related to something iOS does under the hood or with its event handling. Sorry about the hassle.

@GreenSock thanks again for looking into it, I appreciate it.
I believe, especially for website with a certain style, isn't that uncommon trying to scroll more, just to see if there is more content.

I'd love to hear if u find a fix for that!

Thanks for the support!!

Notifications

Messages

normalizeScroll: momentum killed after attempting to scroll past page bottom (iOS Safari)

Recommended Posts

fabigsap

GreenSock

fabigsap

fabigsap

GreenSock

fabigsap

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members