CSS opacity过渡、blur滤镜与父元素overflow:hidden组合导致图片尺寸突变Bug求助

这确实是浏览器渲染引擎在处理滤镜、过渡和overflow:hidden组合时的一个常见 quirks，我碰到过好多次类似的问题，给你几个可行的修复方案：

方案1：给父元素开启硬件加速 #

通过给父元素添加transform: translateZ(0)，可以触发浏览器的GPU加速渲染，让元素的渲染路径更稳定，避免滤镜和过渡叠加时的布局计算错误。

修改后的CSS：

.parent {
    width: 200px;
    height: 200px;
    overflow: hidden;
    /* 新增硬件加速属性 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0); /* 兼容旧版Chrome/Safari */
}

方案2：给子元素添加backface-visibility: hidden #

这个属性同样能触发硬件加速，并且可以避免一些3D渲染层面的布局偏移问题，和方案1效果类似，选一个用就行。

修改后的CSS：

.child {
    width: 250px;
    height: 250px;
    opacity: 0;
    -moz-filter: blur(40px);
    -o-filter: blur(40px);
    -ms-filter: blur(40px);
    filter: blur(40px);
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    /* 新增这行 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

方案3：用伪元素承载模糊滤镜（推荐，更稳定） #

有时候直接在<img>元素上叠加滤镜和过渡会和overflow:hidden产生冲突，把滤镜放到父元素的伪元素上，让图片作为背景，这样可以分离渲染层，彻底避免布局突变的问题，还能简化代码（不用JS也能实现）。

修改后的完整代码：

<div class="parent"></div>

.parent {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative; /* 必须，让伪元素相对于父元素定位 */
}

.parent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 把图片作为背景图 */
    background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg') center/cover;
    opacity: 0;
    filter: blur(40px);
    transition: opacity 0.5s ease-out;
}

/* 直接用CSS hover触发过渡，不需要JS */
.parent:hover::before {
    opacity: 1;
}

问题原因解释 #

这个bug的本质是：浏览器在处理filter: blur时，会自动扩展元素的边界来容纳模糊区域（虽然父元素设置了overflow:hidden），而当同时存在opacity过渡时，浏览器的布局引擎和合成引擎之间出现了同步延迟——过渡过程中没有正确计算元素尺寸，直到过渡结束才重新计算，导致图片突然“跳变”。

开启硬件加速或者分离渲染层，能让浏览器更稳定地处理这些属性的组合，避免布局计算的延迟错误。

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