Animation Position Issue with Sticky Container on Tab Change

We're encountering a problem in our Next.js application where the position of animations within a sticky container becomes misaligned whenever the browser tab is changed.

This happens only on the elements within a sticky container, the rest is working fine!

Please have a look at the Loom recording below:

https://www.loom.com/share/d7dbc26b0a794a2eb7be6fa79f202444?sid=4ee4d574-f174-4e8a-bf3a-bbcd6b9dc364

Basic example:

export default function FullCircle() {
  return (
    <section className="news-section section-news">
      <div className="section-news__inner">
        <header className="news__header">
          <div className="news__header-curved-text"></div>
          <div className="circle-wrapper smaller news__header-decoration">
            <div className="circle"></div>
          </div>
          <div className="news__description a1 anim-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
          </div>
        </header>
        <div className="news__cards">
          <div className="news__cards-container">
            <Parallax translateX={[50, 10]} className="card-wrapper">
              <Card img={Skoljkica} price={FestivalPackages[0].price} pass={FestivalPackages[0].name} text={FestivalPackages[0].description} markdown={FestivalPackages[0].markdown} />
            </Parallax>
          </div>
        </div>
      </div>
    </section>
  );
}

We have a root layout defined:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-[#FCF8EF]">
        <Providers>{children}</Providers>
        {/* <Footer /> */}
      </body>
    </html>
  );
}

and the parallax provider:

"use client";

import { ParallaxProvider } from "react-scroll-parallax";

export function Providers({ children }: { children: React.ReactNode }) {
  console.log("Providers");
  return <ParallaxProvider>{children}</ParallaxProvider>;
}

We are running Next 14 with App router and react 18.2.0

jscottsmith / react-scroll-parallax

Animation Position Issue with Sticky Container on Tab Change #243