Next.js React项目selection_bubble_root类div的作用与移除方法

这个DOM节点并不是Next.js官方脚手架、或是你项目本身的业务代码生成的。
从类名特征、默认隐藏但占位的表现判断，它是浏览器划词类扩展插件（划词翻译、网页高亮、侧边笔记工具等）注入的预留挂载容器：插件为了在用户选中页面文本时弹出操作气泡（翻译弹窗、复制按钮、记笔记入口等），会提前把这个根节点插入到所有站点的body末尾。闲置状态下插件会给节点设置visibility: hidden，但没有通过display: none或绝对定位将其移出文档流——而CSS规则中visibility: hidden仅让元素不可见，仍然保留元素的原始布局位置和尺寸，因此会产生冗余的布局空白。

按照以下步骤处理即可：

• 第一步先验证来源：打开浏览器无痕/隐私模式（默认禁用所有第三方扩展），启动你的Next.js项目后刷新页面，如果这个冗余div消失，即可确认是扩展注入，和项目代码无关。
• 针对扩展注入的场景，有两种可选处理方式：
  1. 定位对应扩展：在浏览器扩展管理页面逐个禁用扩展，刷新页面直到该div消失，即可找到触发问题的插件。如果该插件日常使用频率低，直接禁用或卸载即可；如果需要保留插件功能，可在插件设置中关闭「在当前类站点注入划词功能」「预插入挂载节点」类的开关。
  2. 站点侧做样式屏蔽：如果不想调整插件配置，可以在项目的全局样式文件（如App Router下的app/globals.css、Pages Router下的styles/globals.css）中加入如下规则，直接将该节点移出布局流：

     .selection_bubble_root {
       display: none !important;
     }
     

     注意：该方式会直接隐藏插件的挂载容器，如果插件的划词功能依赖该节点，会导致对应功能失效，优先推荐使用方案1处理。
• 特殊异常排查：如果无痕模式下该节点仍然存在，可全局检索项目内所有代码、已安装的第三方依赖，确认是否是引入的带划词交互的组件（如网页评论、文档批注类组件）默认挂载的节点，调整对应组件配置或卸载依赖即可解决。

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