4

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>
Double M
  • 1,449
  • 1
  • 12
  • 29

1 Answers1

0

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.

Bryce Howitson
  • 7,339
  • 18
  • 40
  • Added your suggestion to the snipped above, did not change anything. It's got nothing to do with your 2017 MBP, I know for a fact that this effect even works on a 2009 MPB ;) However I did experience that scrolling the regular page (not an overflowing element) underneath does work. – Double M Mar 12 '19 at 17:34
  • Bummer, it still feels like it's not refreshing the paint when scrolling the element. That's why I was wondering if it's somehow related to hardware. Do you have access to something with a high-end GPU? I'm wondering if 1. It's behaving as designed? or 2. Safari is optimizing for lower end hardware (like my MBP) and not repainting? Do you know how MS Edge treats it? – Bryce Howitson Mar 12 '19 at 17:40
  • Also can you manually force a repaint (I know, it sounds like a horrible hack). Here's a [few ways](https://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes). Possibly something to attach to `requestAnimationFrame()` – Bryce Howitson Mar 12 '19 at 17:44
  • I'm running this on the latest 2018 MBP with a Radeon Pro 555X. This really does not seem to be hardware related at all, as it works on the same machine for page scrolling. I've got a hunch that it's just a bug... – Double M Mar 14 '19 at 14:39
  • Does seem like a bug. Do you have any way to test it in Edge? (I don't) I think that's the only other browser that supports this filter at the moment. – Bryce Howitson Mar 14 '19 at 19:14
  • You‘re right, the very snipped from above works flawlessly on Edge. Go figure. Who thought Microsoft would get a browser right for once. – Double M Mar 16 '19 at 13:48
  • @DoubleM well at least now you know the code is correct :). Honestly, I think Safari is becoming the new IE. – Bryce Howitson Mar 16 '19 at 21:26