'How to fix CSS backdrop-filter blur disappearing when using transition-transform or duration? [Chrome only]

Simple Codepen: https://codepen.io/themanfromearth1/pen/WNRoyyW

With Slick Slider: https://codepen.io/maxbeat/pen/abNBrex

The error happens when you combine backdrop-filter blur with either transition-duration or transform in the parent.

Parent Div:

.slider {
  transition-duration: 300ms; /** One of those two is enough **/
  transition: transform 0.3s; /** But with either the bug occurs **/

  transform: translate3d(-100px, 0, 0);
}

Child Div:

.slider__item {
  background: rgba(206, 206, 206, 0.15);
  backdrop-filter: blur(89px);
}

When you click the button, the CSS blur disappears for a second and then the slide is blurred again.

Chrome: Problem

Firefox: Works (you have to enable backdrop-filter first in about:config)

Webkit/Safari: Working

Edit: There is a confirmed bug-report on Chromium for this problem https://bugs.chromium.org/p/chromium/issues/detail?id=1194050

csstransformblur


Solution 1:[1]

It's a bug !
I've encountered it myself while I was building my own portfolio.
The way I've solved it was by using an API for smooth scrolling that I wrote which is available here: https://github.com/CristianDavideConte/universalSmoothScroll
Basically the solution is: don't use translate and backdrop-filter:blur together, just make the parent container scrollable and smoothly scroll it whenever you need it.

I've rewrote your slider example so that it correctly works with the API:

const maxSlide = 5;
const minSlide = 1;
const visibleSlides = 3;
let numSlide = 0;

function init() {
  let leftArrow = document.getElementById('left-arrow');
  let rightArrow = document.getElementById('right-arrow');
  let slider = document.getElementsByClassName('slider')[0];
  let slides = slider.children;    

  leftArrow.onclick = (e) => {
    e.preventDefault();
    if(numSlide > minSlide - 1) {
      numSlide--;
      uss.scrollIntoView(slides[numSlide], true, null, null, true);
    }
  }

  rightArrow.onclick = (e) => {
    e.preventDefault();    
    if(numSlide < maxSlide - visibleSlides) {
      numSlide++;
      uss.scrollIntoView(slides[numSlide], true, null, null, true);
    }
  }

  /* We apply an ease function to make it look pretty */
  let whateverEaseFunctionYouLike = remaning => {return remaning / 15 + 1;};
  uss.setXStepLengthCalculator(whateverEaseFunctionYouLike, slider);
}
* {
    padding: 0;
    margin: 0;
  }
  
body {
  height: 100vh;
  overflow: hidden;
  background: url(https://img.wallpapersafari.com/desktop/1366/768/66/57/D2uNEj.jpg) no-repeat; /* Moved from container */
  background-size: cover; /* Moved from container  */
}

.container {
  width: 100vw; /* Added */
  display: flex; /*Added */
  height: 200px; /* Moved from slider__item */
  /*height: 100%; Removed */
  /*padding: 60px; Removed */
}

.slider {
  width: 80%; /* Changed */
  height: 100%; /* Added */
  position: relative;
  display:flex; /* Added */
  overflow: hidden; /* Added */
  /*margin-bottom: 60px; Removed*/
}

.slick-list {
  overflow: hidden;
}

.slick-track {
  display: flex;
}

.slider__item {
  width: calc(74vw / 3); /* Added */
  height: 80%; /* Added */
  flex-shrink: 0; /* Added */
  margin: auto 1vw; /* Changed */
  display: flex;
  align-items: center;
  justify-content: center;
  font: 24px arial;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
}

.slick-dots {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.slick-dots li {
  background: #fff;
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
  list-style:none
}

.slick-dots li.slick-active {
  background: #000;
}

.slick-dots li button {
  font-size: 0;
  border: none;
  opacity: 0;
}

.slick-arrow {
  font-size: 0;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  /*transform: rotate(-45deg); Moved */
  /*position: absolute; Removed */
  margin: auto; /* Added */
  top: 100px;
  cursor: pointer;
}

.slick-next {
  transform: rotate(135deg);
  right: -30px;
}

.slick-prev {
  left: -30px;
}

#left-arrow {
  transform: rotate(-45deg); /* Moved from slick-arrow*/
}

#right-arrow {
  transform: rotate(135deg); /* Moved from slick-arrow and then changed */
}
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-min.js"></script> <!-- Added -->
<body onload="init()"> <!-- Added init -->
  <div class="container">
    <button id= "left-arrow" class ="slick-arrow">&lt;</button> <!-- Added -->
    <div class="slider">
      <div class="slider__item">1</div>
      <div class="slider__item">2</div>
      <div class="slider__item">3</div>
      <div class="slider__item">4</div>
      <div class="slider__item">5</div>
    </div>
    <button id= "right-arrow" class ="slick-arrow">&gt</button>  <!-- Added -->
  </div>
</body>

The advantage of this aproach is that you can customize the scrolling related part of your slider just as much as you did with "slick-slider".
If you need one more example of a carousel built with this API you can take a look at here: https://cristiandavideconte.github.io/myPersonalWebPage/#home

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions