css - Page Resizes on Navigation to Sign In Page in Next.js, But Works Fine on Refresh - Stack Overflow

I am encountering an issue in my Next.js app where, when navigating to the Sign In page via a link (<

I am encountering an issue in my Next.js app where, when navigating to the Sign In page via a link (<Link href="/signin">), the page initially appears smaller or resized (around 90% of the size). However, when I refresh the page or navigate directly to the Sign In page (http://localhost:3000/signin), it renders with the correct size.

  • The issue only occurs when navigating to the Sign In page via client-side navigation.

  • Refreshing the page or using a direct URL resolves the issue, and the page displays correctly at 100%.

Environment:

  • Next.js version: ^13.4.19
  • tailwindcss version: 3.3.3

Sign In Page:

<div className="flex min-h-screen items-center justify-center bg-gray-100 p-4">
 <div className="relative w-full max-w-md rounded-xl bg-white p-8 shadow-xl">
   {/* Sign In Form */}
 </div>
</div>

Home page Navbar Link:

<Link href="/signin">
  Sign In
</Link>

What I’ve Tried:

h-screen and min-h-screen both didn’t solve the issue.

the problem I have a style on my Navbar.css:

  html {
    font-size: 10px;
    scroll-behavior: smooth;
  }

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745090877a4610686.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信