应用backdrop-filter的旋转div靠近浏览器边缘颜色异常如何修复？

我有一个设置了backdrop-filter: blur(42px);样式的div，当对其父元素添加transform: rotate(-15deg);并设置right: -2rem;使其靠近浏览器边缘时，该div下方区域的颜色会变成浏览器边缘的颜色；未旋转时则不会出现这个异常。

相关代码 #

CSS代码 #

#box {
       height: 200px;
       width: 200px;
       position: absolute;
       transform: rotate(-15deg);
       right: -2rem;
       top: 2rem;
}

#box::before {
       content: "";
       height: 100%;
       width: 100%;
       border-radius: 20%;
       display: flex;

       z-index: -1;
       background: rgba(19, 254, 164, 0.7);
       box-shadow: 0 0px 100px rgba(19, 254, 164, 1);
}

.box2 {
       backdrop-filter: blur(42px);
       height: 110%;
       width: 110%;
       border-radius: 20%;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-40%, -40%);
       z-index: 999999;
}

HTML代码 #

<div>
     <div class="box1" id="box">
          <div class="box2"></div>
     </div>
</div>

这个问题源于backdrop-filter的工作机制：它会模糊元素后方的所有可见内容，当旋转后的元素部分超出浏览器视口时，视口外的空白区域（即浏览器底色）会被纳入模糊范围，导致颜色异常。以下是几种可行的修复方法：

方法一：父容器添加溢出裁剪与背景色 #

修改#box的样式，添加overflow: hidden裁剪内部超出的部分，同时设置与页面背景一致的background-color，让父容器背景替代视口外空白被模糊：

#box {
  height: 200px;
  width: 200px;
  position: absolute;
  transform: rotate(-15deg);
  right: -2rem;
  top: 2rem;
  overflow: hidden; /* 裁剪超出部分 */
  background-color: #ffffff; /* 替换为你的页面背景色 */
}

方法二：调整backdrop-filter的作用元素 #

将backdrop-filter直接应用到旋转的#box上，同时调整伪元素的定位方式，确保视觉效果一致，这样滤镜只会作用于父容器范围内的内容：

#box {
  height: 200px;
  width: 200px;
  position: absolute;
  transform: rotate(-15deg);
  right: -2rem;
  top: 2rem;
  backdrop-filter: blur(42px); /* 将滤镜移到旋转元素上 */
  border-radius: 20%;
}

#box::before {
  content: "";
  height: 100%;
  width: 100%;
  border-radius: 20%;
  position: absolute; /* 修改为绝对定位 */
  z-index: -1;
  background: rgba(19, 254, 164, 0.7);
  box-shadow: 0 0px 100px rgba(19, 254, 164, 1);
}

注：此方法可移除原有的.box2元素及对应样式

方法三：扩展外层容器背景范围 #

给#box的外层容器添加足够的内边距和背景色，确保元素旋转后超出视口的部分下方也有背景覆盖，避免空白区域被模糊：

/* 假设外层div添加类名container */
.container {
  position: relative;
  padding: 3rem; /* 内边距需覆盖旋转后超出的区域 */
  background-color: #ffffff; /* 页面背景色 */
  overflow: hidden;
}

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