-
Link to the code that reproduces this issuehttps://github.com/nattui/issue-nextjs-error-overlay-rem To Reproducehtml { font-size: 10px }Current vs. Expected behaviorI use html
Provide environment informationOperating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
Available memory (MB): 16384
Available CPU cores: 8
Binaries:
Node: 23.7.0
npm: 10.9.2
Yarn: 1.22.21
pnpm: 10.4.1
Relevant Packages:
next: 15.2.0 // There is a newer version (15.2.1) available, upgrade recommended!
eslint-config-next: 15.2.0
react: 19.0.0
react-dom: 19.0.0
typescript: 5.7.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)Error Overlay Which stage(s) are affected? (Select all that apply)Other (Deployed), Vercel (Deployed), next start (local), next build (local), next dev (local) Additional contextNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
@nattui curious: is there a reason why you are adding the styles to |
Beta Was this translation helpful? Give feedback.
-
|
Changing root ( I feel it is a more oddity to have the Error UI and Next.js toast overlay to scale with the project's root font size. It should look the same regardless of root font size |
Beta Was this translation helpful? Give feedback.
-
@nattui Since we're displaying a lot of text-rich information in the error overlay, we want to respect a user's browser "font scaling" setting, which is done through rems. The blog also has this quote:
I think similarly, setting a |
Beta Was this translation helpful? Give feedback.
-
|
@nattui We're further discussing changes for this! |
Beta Was this translation helpful? Give feedback.
-
|
In my opinion, any external component or visual library that is not part of the actual developing app should define and reference its base styles and not trust what a browser or the app may be setting on root font-styles. Today '16px' might be the norm among mainstream browser, but in the future, if one of those changes this setting, those components would be visually impacted without developer intervention. The practical reasons why it is always a good practice to define the font-size of the :root html on an app, are these:
|
Beta Was this translation helpful? Give feedback.
-
|
Looks like this has been fixed in the latest Next.js ( |
Beta Was this translation helpful? Give feedback.
Looks like this has been fixed in the latest Next.js (
15.3.0) update! ✨