CSS背景过滤器后面的内容移动时不会更新 [英] CSS backdrop-filter does not update when content behind it moves

问题描述

我应该认为，随着 backdropped 元素后面的内容的移动，该元素的背景颜色会适应显示，好像该内容在闪闪发光。在此示例中，情况并非如此：

怎么了？在Safari 12.0.3，macOS Mojave 10.14.3上进行了测试。

 。容器{宽度：100％；高度：150px；溢出-y：滚动；}。block {高度：50像素； margin：10px;}。block：nth-​​child（1）{margin-top：30px;背景色：红色；}。block：nth-​​child（2）{背景色：绿色；}。block：nth-​​child（3）{背景色：蓝色；}。glass {位置：绝对； background-color：rgba（255，255，255，0.3）;最高：0;宽度：25％;边框：1px纯黑色；高度：100％；}。透明{左：55％；}。磨砂{左：20％； background-color：rgba（255，255，255，0.5）; -webkit-backdrop-filter：blur（20px）;背景过滤器：blur（20px）; -webkit-transform：translation3d（0，0，0）; -moz-transform：translation3d（0，0，0）; -ms-transform：translation3d（0，0，0）;转换：translate3d（0，0，0）;}  

  < div id = app> < div class = container> < div class = block>< / div> < div class = block>< / div> < div class = block>< / div> < div class = glass clear>< / div> < div class = glass frosted>< / div> < / div>< / div>  

解决方案

在我缩小屏幕并滚动页面后，我注意到它刷新了 DID 。

但是，在滚动示例时（无论屏幕大小如何）都没有更新

因此，似乎是涂料在引起问题，而不是在实现。这也让我想知道设备功能是否可能部分故障。我使用的是13英寸2017 MBP，因此没有离散GPU。

您是否尝试过强制GPU加速？为此，请将其添加到元素中：

  -webkit-transform：translate3d（0，0，0）; 
 -moz-transform：translation3d（0，0，0） ； 
 -ms-transform：translate3d（0，0，0）； 
转换：translate3d（0，0，0）; 
  

使用 translateZ（0）时，Safari仍然看起来很麻烦，因此请改用上面的代码。

编辑：上面的方法似乎并不能解决问题。请考虑添加会更改（ docs ），因为Safari支持。不确定过滤器是否有效更改对象，但我相信可以使用滚动位置。我应该注意，这是一个核选项，请小心。

I should think that as the content behind a backdropped element moves, the element's background color adapts to appear as if the content was shining through it. In this example, it's not the case:

What's wrong? Tested this on Safari 12.0.3, macOS Mojave 10.14.3.

.container {
  width: 100%;
  height: 150px;
  overflow-y: scroll;
}

.block {
  height: 50px;
  margin: 10px;
}

.block:nth-child(1) {
  margin-top: 30px;
  background-color: red;
}

.block:nth-child(2) {
  background-color: green;
}

.block:nth-child(3) {
  background-color: blue;
}

.glass {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  top: 0;
  width: 25%;
  border: 1px solid black;
  height: 100%;
}

.clear {
   left: 55%;
}

.frosted {
  left: 20%;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<div id="app">
  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="glass clear"></div>
    <div class="glass frosted"></div>
  </div>
</div>

解决方案

I noticed it DID refresh for me after I made the screen smaller and scrolled the page. But didn't update when scrolling the example (regardless of the screen size)

So it appears that the paint is causing the issue and not the implementation. This also makes me wonder if the device capabilities might be partly at fault. I'm using a 13" 2017 MBP so no discrete GPU.

Have you tried forcing GPU acceleration? To do so add this to the element:

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

Safari still seems buggy with translateZ(0) so use the above instead.

Edit: The above didn't seem to solve the problem. Consider adding will-change (docs) since that's supported by Safari. Not sure if filters are a valid change object but I believe 'scroll-position' can be used. I should note that this is a nuclear option so be careful.

这篇关于CSS背景过滤器后面的内容移动时不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！