CSS背景过滤器后面的内容移动时不会更新

Question

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

怎么了？在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>

Answer 1

在我缩小屏幕并滚动页面后，我注意到它刷新了 DID 。但在滚动示例时没有更新（无论屏幕大小如何）

因此，看来是涂料引起了问题，而不是造成了问题。这也让我想知道设备功能是否可能部分故障。我使用的是13英寸2017 MBP，因此没有独立的GPU。

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

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

使用translateZ(0)的Safari仍然似乎有问题，因此请改用上面的代码。

编辑：以上似乎未能解决问题。考虑添加will-change（docs），因为Safari支持。不确定过滤器是否是有效的更改对象，但我相信可以使用“滚动位置”。 我应该注意，这是一个核选择，所以要小心。