NextJS 13.2.4中zoom:1.1导致100vh布局异常问题排查与解决

问题场景 #

使用NextJS 13.2.4开发时，给包含登录表单和图片的父容器设置height:100vh，但页面实际高度远超100vh，同时出现不必要的滚动条。已在globals.scss中配置全局样式重置：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

但问题未得到解决。

排查过程 #

1. 通过Chrome开发者工具检查样式，发现body元素被自动注入了zoom:1.1的样式，该样式来自id为zoompage-zoomlevel-style的<style>标签。
2. 最初怀疑是NextJS内置配置导致，于是在globals.scss中添加以下代码临时覆盖：

body {
  zoom: 1 !important;
}

此方法暂时解决了滚动条问题，但属于临时方案。

永久解决方案 #

最终确认问题根源是Zoom Page WE Chrome浏览器插件，卸载该插件后，页面恢复正常，滚动条不再出现。

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