I rebuilt this sticky scroll effect from this site where scrolling will reveal content underneath (so the top and bottom layers are shown simultaneously) using nextjs & tailwind.

It works smoothly in chrome locally and in production. However, in firefox or safari it seems to be janky, repainting the content slowly on every scroll.

Is there something wrong with the below or that can be optimised for these browsers while maintaining the same effect.

Code Sandbox

export default function Home() {
  const projects = [
    {
      title: "Google Search Engine",
      link: "www.google.com",
    },
    {
      title: "Youtube",
      code: "www.youtube.com",
    },
    {
      title: "Discord Chatbot",
      link: "www.discord.com",
      code: "www.discord.com",
    },
  ];

  return (
    <section className="min-h-[300vh] bg-black text-white text-6xl" id="Works">
      {projects.map((project, index) => (
        <div key={index} className={"px-5"}>
          <div className="h-screen contain-paint bg-black border-t border-neutral-600">
            <div
              className={`h-[300vh] w-full absolute left-0 right-0`}
              style={{ top: `${-100 * index}vh` }}
            >
              <div className="sticky top-0 h-screen flex justify-between flex-col lg:flex-row">
                <div className="flex flex-col justify-center h-1/3 lg:h-full lg:w-1/2">
                  {/* TITLE */}
                  <div className="flex items-center font-bold">
                    {index + 1}. {project.title}
                  </div>
                  {/* LINKS */}
                  <div className="flex flex-col justify-center">
                    <div className="mt-5 mr-5">
                      {project.link && (
                        <a
                          href={project.link}
                          className="text-white underline block"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          Live Site
                        </a>
                      )}
                      {project.code && (
                        <a
                          href={project.code}
                          className="text-white underline block"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          Source Code
                        </a>
                      )}
                    </div>
                  </div>
                </div>
                {/* IMAGE */}
                <div className="relative flex justify-center items-center h-2/3 lg:w-1/2 lg:h-full px-5 py-5 lg:py-10">
                  <a
                    href={project.link || project.code}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="relative w-full h-full"
                  >
                    {index + 1}. {project.title} images would go here
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}

I orginally thought it was the images causing this but removing basically all the code besides the project title’s still has the same effect on firefox/safari.

I’ve also tried removing most cosmetic css (like padding, margins) but to no avail.