如何修复transition引发的盒子阴影偶发裁剪问题

Chrome transition触发box-shadow裁剪问题解决方案 #

根因说明

这是Chrome blink内核的已知渲染bug：当元素设置transition: box-shadow 80ms这类阴影过渡规则时，浏览器会为元素创建独立GPU合成层提升动画性能，计算合成层的裁剪边界时未将阴影的模糊、扩展范围纳入计算，导致超出元素原始盒模型的阴影部分被意外裁剪，该问题暂未在Safari的WebKit内核中复现。

修复方案

• 优先使用侵入性最低的方案：给当前元素添加will-change: box-shadow属性，提前告知浏览器需要预留阴影的绘制空间，预计算合成层边界时就会包含阴影范围
• 如果上述方案无效，可以根据阴影的模糊+扩展半径，给元素添加对应宽度的透明外描边强制扩展绘制区域：outline: [阴影最大延伸值] solid transparent
• 也可以给元素添加transform: translateZ(0)，强制触发完整的盒边界计算同时提升到独立合成层，规避裁剪问题
• 如果元素父容器设置了overflow: hidden，可以适当给父容器添加对应大小的padding，给阴影预留足够的展示空间

效果参考

异常裁剪效果：

正常展示效果：

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