Hi all, I really have no idea where to ask this, if it's a React thing, a Next thing, or a Tailwind thing so I'm shooting my shot everywhere. Sorry in advance if this isn't the appropriate place.

I am building a landing page that has several sticky sections (not sure if that is relevant). On mobile only, when I scroll quickly down the page, the final non-sticky sections' backgrounds aren't rendered immediately and you can see them popping in as I scroll. This happens in both mobile Safari and mobile Chrome.

The setup of my page is as follows:

'use client'

export default function Page() {
  return (
    <main ...>
      <section className="sticky bg-...">
      <section className="sticky bg-...">
      <section className="bg-..."> <- NOT STICKY
    </main>
  )
}

I've tried disabling animations in each section as well as bumping the z-index of the final section to no avail.

I've tried so many variations on Google searches but couldn't find anything at all. Anyone have any idea what's going on?