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

【问题标题】：Does transition work with backdrop-filter?过渡是否适用于背景过滤器？
【发布时间】：2020-07-24 11:36:36
【问题描述】：

如果我在父元素上使用 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

【问题讨论】：

标签： javascript html css filter css-transitions

【解决方案1】：

真正的罪魁祸首似乎是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>

【讨论】：

【解决方案2】：

出于几个原因，我建议简化代码，如下所示。我相信它可以做你想做的事情，并且更兼容跨浏览器——因为 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>

【讨论】：