Custom css broken when reveal sections on scroll is on Dawn 10

[nhellyer]

Hello! I have some custom css for a div that makes it looks like frosted glass. If I turn off "reveal sections on scroll" the glass effect does work on both safari and chrome but once i turn the "reveal sections on scroll" on safari works fine but on chrome, it does go opaque but does not have any white. If you could help me that would be awesome!

here's the CSS code:

.slideshow__text.banner__box {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(15px); /* For Safari */
  border-radius: 10px;
}
@media only screen and (max-width: 767px) {
  .slideshow__text.banner__box {
    width: 80;
  }
}
a {
  background-color: black;
  color: white;
}

the website is https://dallaspercussion.com

Here are some screenshots

Safari:

chrome:

 

If I could keep the setting on, that would be awesome because everything looks cleaner. Thank you!

[Zqdo]

Everything seems to work well on my end. What exactly are you seeing on the Chrome version that you don't want to happen?

[nhellyer]

sorry. i turned off the setting. i can turn it back on for you to see. 

[nhellyer]

I have turned it on. it should look weird on chrome or chromium

[Zqdo]

It looks like it's hidden once it gets to a particular screen size. Did you add this feature?

[nhellyer]

No I did not