Firefox и Safari очень медленно перерисовывают задержку при отображении липкой прокрутки ⇐ CSS

[Anonymous]

Я перестроил этот эффект липкой прокрутки с этого сайта, где при прокрутке будет отображаться содержимое под ним (поэтому верхний и нижний слои отображаются одновременно) с помощью nextjs и Tailwind.
В Chrome он работает без проблем. локально и на производстве. Однако в Firefox или Safari это кажется невозможным: содержимое медленно перерисовывается при каждой прокрутке.
Что-то не так с приведенным ниже или это можно оптимизировать для этих браузеров, сохраняя при этом то же самое? эффект.
Песочница кода

Код: Выделить всё

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 (

{projects.map((project, index) => (





{/* TITLE */}

{index + 1}. {project.title}

{/* LINKS */}


{project.link && (
[url={project.link}
className=]
Live Site
[/url]
)}
{project.code && (
[url={project.code}
className=]
Source Code
[/url]
)}



{/* IMAGE */}

[url={project.link || project.code}
target=]
{index + 1}. {project.title} images would go here
[/url]





))}

);
}

Изначально я думал, что это вызвано изображениями, но удаление практически всего кода, кроме названия проекта, по-прежнему имеет тот же эффект в Firefox/Safari.
Я также пытался удалить большую часть косметического CSS (например, отступы и поля), но безрезультатно.


Подробнее здесь: https://stackoverflow.com/questions/791 ... oll-reveal