过渡是否适用于背景过滤器？

Question

如果我在父元素上使用 overflow:hidden，

CSS transition 无法在 backdrop-filter 上工作。

示例代码：

.image-wrapper {
   width: 200px;
   border-radius: 6px;
   position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(0px);
  transition-duration: .5s;
}

.image-wrapper:hover .overlay {
  backdrop-filter: blur(15px);
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}

<h4>// overflow:hidden (transition not working)</h4>
<div class="image-wrapper" style="overflow: hidden">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

示例视频：https://take.ms/fo80F

Answer 1

出于多种原因，我建议简化代码，如下所示。我相信它做的事情和你想做的一样，而且更跨浏览器兼容——因为 Firefox 目前不支持 backdrop-filter.

.image-wrapper {
   width: 200px;
   border-radius: 6px;
   position: relative;
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
  filter: blur(0);
  transition-duration: .5s;
}

.image-wrapper img:hover {
  filter: blur(15px);
}

<h4>// overflow:hidden (transition is now working)</h4>
<div class="image-wrapper" style="overflow: hidden">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>

Answer 2

真正的罪魁祸首似乎是border-radius。

听起来像个错误，但我找不到（虽然有很多相关的错误，因为整个背景过滤器功能在实现和规范中仍然充满错误），所以你可能想报告它直接到 the ones that can do something about it.

请注意，解决方法是使用剪辑路径而不是此边界半径：

.image-wrapper {
  width: 200px;
  position: relative;
  line-height: 0
}
.clip-me {
  clip-path: inset(0px 0px round 6px 6px);
}
  
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(0px);
  transition-duration: .5s;
}

.image-wrapper:hover .overlay {
  backdrop-filter: blur(15px);
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}

<h4>// overflow:hidden (transition working but overflow is now useless)</h4>
<div class="image-wrapper clip-me" style="overflow: hidden;">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

过渡是否适用于背景过滤器？

Does transition work with backdrop-filter?

html

javascript

css

filter

css-transitions