Next.js+Tailwind项目Android端CSS滚动动画卡顿问题求助

我在基于Next.js和Tailwind构建的应用中遇到渲染动画问题：滚动时缩小Logo的简单动画仅在Android设备上出现卡顿。测试了2台iPhone、若干笔记本电脑及3台安卓手机（三星Note10、Flex 4、某款小米机型），仅安卓设备存在该问题。

滚动检测逻辑 #

useEffect(() => {
    window.addEventListener('scroll', stickNavbar);
    return () => window.removeEventListener('scroll', stickNavbar);
}, []);

useEffect(() => {
    offsetX < 1024 ? offsetY > 40 ? setScroll(true) : setScroll(false) : undefined
    offsetX >= 1024 ? offsetY > 76 ? setScroll(true) : setScroll(false) : undefined
}, [offsetY, offsetX])

const stickNavbar = () => {
    if (window !== undefined) {
        setOffsetY(window.scrollY)
        setOffsetX(screen.width)
    }
};

类名切换逻辑 #

${scroll ? 'w-8 scrolled' : ''}

动画样式代码 #

.nav {
  .logo{
    //transition-delay: 0.15s;
    transition-property: all;
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
    top: -1.5rem;

    &.scrolled{
      margin-top: 2.15rem;
      margin-left: 0.75rem;
    }

    @include desktop(){
      transition-delay: 0s;
    }
  }
}

我已注释过渡延迟，设置延迟或许能缓解卡顿，但想了解还有哪些可优化的方向？

内容的提问来源于stack exchange，提问作者Rade