Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue.
After installing the latest NextJS version 13.2.4 on my computer, I encountered a problem while styling a simple element - setting 100vh on a parent container that wraps a sign-in form and an image.
JSX Code Snippet
<section className={classes.section}> //applied height: 100vh here;
<div className={classes['section__form']}>
<SignInForm />
</div>
<div className={classes['section__img']}>
<img src="/images/sign-in.jpg"></img>
</div>
</section>
Challenges Faced
- The page height exceeded 100vh, causing an unwanted scroll bar.
- Due to visual reasons, I needed to eliminate the unnecessary scrollbar.
In my globals.scss, I always include the following:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Despite these global settings, the page still displayed a scrollbar and extended beyond 100vh.
After much confusion, I discovered in Chrome dev tools that the body element had a default zoom property set.
body {
zoom: 1.1;
}
I couldn't locate where this property was coming from in my project files, but it seemed to get added automatically to the HTML document.
<style id="zoompage-zoomlevel-style" type="text/css">body { zoom: 1.1; }</style>
It appears to be buried deep within the NextJS setup files.
Solution
To override the existing zoom: 1.1 property, I added the following to my globals.scss:
body {
zoom: 1 !important;
}
Without the !important rule, it wouldn't override the existing property.
https://i.sstatic.net/mOzaV.png
I'm left wondering if this is a bug or if there's a more interesting reason behind it? 😉
Maciej
Permanent Solution
The Zoom Page WE Chrome plugin is the culprit behind this issue (adding the extra line to the HTML document). If you encounter similar problems, make sure to uninstall this plugin and the issue will be resolved.