CSS backdrop-filter does not update when content behind it moves

问题: 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 exa...

问题:

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:

enter image description here

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>


回答1:

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.

  • 发表于 2019-03-15 00:14
  • 阅读 ( 56 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除