Why Backdrop Filter in Firefox Don't Work

Why backdrop filter in Firefox don't work?

Its not supported by default https://caniuse.com/css-backdrop-filter

However you can activate it manually.

Navigate to about:config and set it to true

CSS: Workaround to backdrop-filter?

As of Chrome M76, backdrop-filter is now shipped, unprefixed, and without a needed flag.

https://web.dev/backdrop-filter/

NOTE: (since this answer keeps getting downvoted because Mozilla hasn’t yet shipped it): this feature is available in Safari, Chrome, and Edge, but not yet in Firefox. Mozilla is planning to ship it very soon, but hasn’t yet. So this answer doesn’t contain a “workaround” but simply more information about which browsers require a workaround. Which still seems like useful information.

CSS blur filter not working in Firefox and IE 10, any alternatives?

CSS3 filters are not supported in IE10 or Firefox (v.23), and support is unknown for those browsers in the near future.

Have a look: http://caniuse.com/#feat=css-filters

You could use Modernizr to check for CSS filter support and fallback to a background image if not supported.

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

Without using translate you can use positioning with left.

let translated = false

function translate3d() {
  const div2 = document.getElementById("slider")
 if (!translated) {
    div2.style.left = '100px';
 } else {
   div2.style.left = '400px';
 }

    translated = !translated;
} 

.slider {
  display: flex;
   align-items: center;
  justify-content: center;
  position: relative;
  left: 400px;
  
  /** Remove duration and blur works **/
  transition-duration: 300ms; 
  /** Also disappears if you transform like this **/
  /**  transition: transform 0.3s **/
  
}

.slider__item {
  height: 100px;
  width: 100px;
  background: rgba(206, 206, 206, 0.15);
  backdrop-filter: blur(89px)!important;
   margin: 6px;
  margin-top: 200px;
}

.container {
  height: 1900px;
  width: 899px;
  background-image:url(https://images.unsplash.com/photo-1616604745302-60a195c7061a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1401&q=80);
  
}

.button {
  position:absolute;
  top: 350px;
  left: 400px;
}

<div class="container">
  <div class="slider" id="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>
  
</div> 
<div class="button">
  
   <button type="button"  onclick="translate3d()">Click to transform translate3d</button>
</div>
<div>
    

backdrop-filter not working with table tag

Applying the backdrop-filter to the td instead produces the intended effect. I've also dropped in a more defined image to show results.

body{
    background: rgb(179,179,201);
    background: linear-gradient(90deg, rgba(179,179,201,1) 0%, rgba(216,216,224,1) 99%);
    background: url(http://www.fillmurray.com/1000/1000);
}
table{
    margin-top: 5%;
    margin-left: 20%;
    width:50%;
    border-collapse: separate;
    border-spacing: 0 40px;
}
tr{
    height: 100px;
    padding:50px;
    background: rgba( 4, 9, 210, 0.30 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
td {
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
}

Be sure to close your style element. Beware, backdrop-filter doesn't work on Firefox by default.

---

Related Topics