网站页面快速滚动/缩放时内容闪烁消失问题排查求助

你的页面在快速滚动、缩放时出现闪白、内容短暂消失的问题，核心原因是**backdrop-filter: blur() 带来的高渲染性能开销**，该属性会强制浏览器频繁重绘元素，再加上代码里的基础错误，进一步放大了卡顿现象：

先修复代码中的基础错误 #

1. CSS语法错误：body的渐变代码遗漏分号，导致WebKit内核的渐变未生效， fallback逻辑异常：

/* 原错误代码 */
background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29) background: linear-gradient(to right, #24243e, #302b63, #0f0c29);

/* 修复后 */
background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
background: linear-gradient(to right, #24243e, #302b63, #0f0c29);

2. 重复引入Bootstrap JS：页面加载了两次bootstrap.min.js，会造成冗余加载和潜在冲突，删除其中一个即可：

<!-- 保留以下引用即可 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

3. 布局类拼写错误：将.conatiner改为.container，避免Bootstrap布局规则失效

4. ID重复问题：不要给多个元素使用同一个id="card"和id="cardContainer"，ID必须唯一，改为class定义

优化backdrop-filter渲染性能 #

给使用backdrop-filter的.col-glass-blur添加GPU加速属性，让浏览器将元素放到独立GPU层渲染，减少重绘次数：

.col-glass-blur {
  text-align: center;
  margin: 10px;
  padding: 10px;
  border-radius: 25px;
  -webkit-box-shadow: 10px 10px 31px 0 rgb(0 0 0 / 80%);
  -moz-box-shadow: 10px 10px 31px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 10px 10px 31px 0 rgb(0 0 0 / 80%);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  /* 添加GPU加速属性 */
  transform: translateZ(0);
  will-change: backdrop-filter;
}

.col-glass-blur:hover {
  background-color: rgba(155, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

替代方案（若GPU加速无效） #

如果上述方法仍存在闪白，用伪元素模拟毛玻璃效果，避免直接使用backdrop-filter：

.col-glass-blur {
  position: relative;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border-radius: 25px;
  -webkit-box-shadow: 10px 10px 31px 0 rgb(0 0 0 / 80%);
  -moz-box-shadow: 10px 10px 31px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 10px 10px 31px 0 rgb(0 0 0 / 80%);
  background-color: transparent;
  z-index: 1;
}

.col-glass-blur::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  z-index: -1;
  transform: translateZ(0);
}

.col-glass-blur:hover::before {
  background-color: rgba(155, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

内容的提问来源于stack exchange，提问作者SG-EXPLOITS Everything