Chrome下mix-blend-mode等CSS属性引发的溢出与适配异常问题咨询

核心问题：Chrome合成层渲染的上下文冲突 #

你的问题本质是Chrome浏览器的合成层渲染机制，和mix-blend-mode、will-change: transform、overflow: hidden、border-radius的组合逻辑冲突导致的，具体拆解如下：

• 合成层提升打破裁剪上下文：
  will-change: transform会主动告诉浏览器「这个元素将来要做变换」，浏览器会把它提升到独立的合成层单独渲染；同时mix-blend-mode也会改变元素的渲染层级规则。当这两个属性同时作用在子元素上时，子元素的渲染会脱离父容器.card的裁剪上下文——简单说就是，父容器的overflow: hidden和border-radius裁剪规则，管不到这个独立出去的子合成层了。

• Chrome对跨合成层裁剪的处理缺陷：
  正常情况下，父容器设置overflow: hidden+border-radius会创建一个裁剪区域，但Chrome的渲染引擎在处理独立合成层的子元素时，不会自动把父容器的裁剪规则同步到子合成层上，导致子元素的蓝色背景直接从父容器的圆角角落漏出来。

• 屏幕缩小触发bug的原因：
  屏幕宽度缩小后，Chrome会触发重新布局和合成层的重计算，原本可能在初始渲染时被掩盖的渲染逻辑bug，这时候就显现出来了——本质是自适应过程中合成层的重新分配，让裁剪失效的问题暴露了。

验证方式 #

你可以做两个小测试来确认：

1. 去掉.blend的will-change: transform，刷新后缩小屏幕，圆角裁剪会恢复正常；
2. 或者去掉mix-blend-mode: color-dodge，同样能解决溢出问题。

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