CSS中backdrop-blur模糊效果不一致问题求助

问题现象 #

当页面中的表单（form）对话框边缘靠近下方文本时，作为背景遮罩的.mask元素的backdrop-blur模糊效果失效；换用<dialog>元素也无法解决该问题，但调整form的left属性值（从calc(50% - (350px / 2))改为calc(50% - (337px / 2))）后，模糊效果恢复正常。

原因分析 #

这是浏览器的性能优化机制导致的：

• 浏览器为减少不必要的渲染计算，会智能判断元素的覆盖区域。当绝对定位的form对话框边缘与下方文本元素的边缘高度贴近时，浏览器可能误判该区域的文本被form完全遮挡，从而跳过对mask遮罩层对应区域的backdrop-blur模糊计算。
• 调整form的left值后，对话框与文本拉开了微小距离，打破了浏览器的这种优化判断，使得mask的模糊效果能正确作用到所有覆盖区域。

解决方案 #

除了你已经使用的调整form位置的方法外，还有两种更通用的处理方式：

• 给mask添加微小内边距：在.mask的样式中添加padding: 1px;，强制浏览器对整个遮罩区域进行模糊计算。
• 显式设置图层层级：给.mask和form分别设置z-index，明确层级关系（比如mask { z-index: 1; }，form { z-index: 2; }），避免浏览器误判图层覆盖关系。

修正后的代码示例 #

CSS代码 #

form {
  display: grid;
  box-sizing: border-box;
  grid-template: auto / 1fr;
  grid-auto-rows: auto;
  background-color: white;
  padding: 20px 40px;
  position: absolute;
  top: calc(50% - (80vh / 2));
  left: calc(50% - (350px / 2)); /* 或调整为你测试有效的337px值 */
  width: 350px;
  height: 80vh;
  z-index: 2; /* 明确层级 */
}

.mask {
  display: block;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.637);
  position: absolute;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  z-index: 1; /* 明确层级 */
  /* 可选：添加微小内边距打破优化 */
  /* padding: 1px; */
}

HTML代码 #

<h1 style="text-align: center;font-size: 60px;margin-top: 0px;">This is an example text</h1>
<div class="mask"></div>
<form method="POST" action>
  <h1>Add Book</h1>
  <p>
    <label for="book_title">Title</label>
    <input type="text" id="book_title" name="title" required />

    <button type="submit">Add Book</button>
</form>

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