点击登录表单输入框导致页面模糊的问题求助

可能的成因及对应解决方案 #

1. 浏览器移动端自动缩放

部分移动端浏览器会在输入框聚焦时自动缩放页面（当页面视口设置不规范时），造成视觉上的模糊感。

• 解决：检查页面的<meta name="viewport">标签，确保设置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

该配置会禁止用户手动缩放，同时阻止浏览器因输入框聚焦触发自动缩放。

2. 全局或父元素的模糊/过渡样式

你的代码中登录容器带有box-shadow-main-content-box-dyigawdaowd类，检查是否存在全局CSS或父容器样式，在输入框聚焦时触发了filter: blur()、transform或过渡动画。

• 排查方法：打开浏览器开发者工具（F12），点击输入框后，实时查看<body>、<html>或.row元素的样式变化，确认是否有模糊相关属性被动态添加。
• 解决：如果找到触发模糊的规则，直接移除或修改；如果是第三方样式干扰，添加覆盖规则：

body:focus-within {
  filter: none !important;
  transform: none !important;
}

3. 第三方库干扰

你的代码里用到了swal()（推测是SweetAlert弹窗库），部分弹窗库会在页面元素聚焦时添加全局遮罩或模糊效果。

• 排查：暂时注释掉onClick="swal()"这段代码，测试输入框聚焦时是否还会模糊。
• 解决：如果是SweetAlert导致，调整库的配置项禁用全局聚焦模糊；或者添加自定义样式覆盖：

.swal2-container {
  backdrop-filter: none !important;
}

4. 浏览器渲染层异常

你的输入框和容器都设置了border-radius、box-shadow属性，部分情况下，输入框聚焦时浏览器渲染层重组会导致短暂模糊。

• 解决：给登录容器添加硬件加速优化，减少渲染异常：

.box-shadow-main-content-box-dyigawdaowd {
  transform: translateZ(0);
  backface-visibility: hidden;
}

快速排查流程 #

1. 先添加正确的视口标签，测试移动端模糊是否消失；
2. 用开发者工具监控页面元素样式变化，定位模糊触发源；
3. 逐步禁用第三方库和自定义样式，缩小问题范围。

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