子元素修改background-color导致父元素box-shadow消失问题

我之前也碰到过这种因为元素重绘导致阴影“消失”的坑，给你几个经过验证的解决方案：

• 用will-change提前通知浏览器优化渲染
  给那个会被添加类的父div加上will-change: background-color;，这个属性能告诉浏览器“这个元素的背景色即将变化”，让浏览器提前为它分配独立的渲染层，避免重绘时影响到卡片的阴影。示例代码：

  .radio-parent-div {
    will-change: background-color;
    /* 其他原有样式 */
  }
  

• 把阴影转移到伪元素上
  把卡片的box-shadow从自身移到它的伪元素里，这样父div的重绘操作就不会干扰到阴影的渲染。具体实现：

  .card {
    position: relative;
    /* 移除原来的box-shadow */
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); /* 你的阴影样式 */
    border-radius: inherit; /* 继承卡片的圆角 */
    z-index: -1;
  }
  

• 用contain属性限制重绘范围
  给父div添加contain: layout paint;，这个属性会让浏览器将该元素的布局和绘制限制在自身范围内，不会触发整个卡片的重绘，自然也就不会影响到边缘的阴影了：

  .radio-parent-div {
    contain: layout paint;
    /* 其他原有样式 */
  }
  

另外可以检查下卡片是否设置了overflow: hidden，如果有的话可能会在重绘时意外裁剪阴影，调整一下overflow属性或者伪元素的层级也能解决问题。

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