only a single backdrop filter can be in use at any given moment

Experimenting with backdrop-filter in Chrome 76. I'm working on a menu with 2 divs, each with a backdrop-filter applied. The first div is displaying the filter effect perfectly, but the second one isn't. Interestingly, when I remove the filter from the first div, the second one works as expected. Any ideas or suggestions?

HTML

<div id="mySidenav" class="sidenav" onmouseover="openNav()">
    <a class="active" href="#">Home</a>
    <a href="page2.html">page2</a>
    <a href="page3.html">page3</a>
    <a href="#" target="_blank">page4</a>
    <div id="mouse" class="mouseout" onmouseout="closeNav()">
        <div class="flyoutTab">Menu</div>
    </div>
</div>

CSS

.sidenav{
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.1);
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 4%;
  backdrop-filter: blur(5px);
}

.mouseout{
  height: 100%;
  width: 5%;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.3);
  overflow-x: hidden;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}
htmlcss

Answer №1

It seems that using backdrop-filter doesn't work well with a lot of nested divs, so I decided to separate them and it fixed the issue.

Answer №2

A great approach to tackle this issue is by defining two classes in your CSS file, such as

.remove-blur {
    backdrop-filter: none;
  }

  .add-blur {
    backdrop-filter: blur(80px);
  }

Afterward, you can use JavaScript to toggle these classes through the DOM wherever you want to apply them.

Answer №3

To achieve a backdrop-filter effect on multiple divs, you can utilize the ::before pseudo-element.

Here's an example implementation:

// Applying only one working backdrop-filter
@mixin glance-effect() {
  background-color: rgba(var(--color-bg-base-rgb), 0.4);
  backdrop-filter: blur(4px);
}

// Implementing multiple backdrop-filters
@mixin glance-effect($blur_size: 4px) {
  isolation: isolate;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;

    background-color: rgba(var(--color-bg-base-rgb), 0.4);
    backdrop-filter: blur($blur_size);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement a sequence of animations within a div using jQuery

My goal is to create an animation effect for each div element within a row when the user scrolls down to that specific point on the page. The layout consists of three <div> elements in the same row. The structure of the HTML code is as shown below: ...

javascriptjqueryhtmlanimation

Create a JavaScript code snippet that replaces the innerHTML of the function document.getElementById with

In my limited knowledge of JavaScript, I have come across an issue with the following code: function example() { document.getElementById("example").innerHTML = "<script>document.write(example)</script>"; } Unfortunately, this code doesn&ap ...

javascripthtmlinnerhtml

Transforming Symbol Characters into HTML Using VB.NET

I want to make sure that any characters in my database entry that are not numeric or alphabetic get converted to HTML code. After doing some research, I came up with the following function: Public Shared Function HTMLEncodeSpecialChars(text As String) As ...

htmlvb.netcharacter-encoding

Displaying limited items based on conditions in CSS

If there are 10 <p> tags, is it possible to limit them to only 5 by hiding the other 5 using CSS? Do I need to add a class five times with nth-child? Can CSS accommodate conditions for this purpose? Considering that the number of <p> tags is ...

css

Creating an interactive table with the power of FPDF and PHP

I have developed a unique Invoice System that allows users to customize the number of headings and fields using FPDF in conjunction with PHP. Subsequently, I can input the heading names and field values into HTML input fields. However, I am encountering a ...

javascriptphphtmlfpdf

Stack Divs Without Using Absolute Positioning

Attempting to overlay divs without using absolute positioning has been quite a challenge. The issue arose when trying to integrate a Paypal cart through Javascript on the website. By default, the cart was positioned closely to the top margin of the webpage ...

htmlcsscss-position

The font weight is failing to take effect

I'm having an issue with the font-weight in my CSS. On my website, I'm trying to decrease the font-weight but even the lightest weight (100) looks too heavy like this: https://i.stack.imgur.com/6dwFa.png However, I want it to look more like this ...

htmlcssreactjsfonts

Modify the div's background color specifically with AngularJS

After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list. I have accomplished this by defining two distinct CSS classes with the main difference being the background colo ...

htmlcssangularjs

Is there a way to convert this JSON object into HTML table code?

I've been working on tweaking a code snippet I came across, but I'm struggling to get it to function the way I desire. Here is the current Javascript code: function JsonUtil() { /** * Given an object, * return its type as a string. ...

javascripthtmljsonrecursionhtml-table

Ways to eliminate the up and down arrow in the MUI number field

How can I remove the up and down arrow from the MUI number field? My current version is 5.3.0. Is it possible to achieve this using the sx prop? Learn more about the sx prop here <TextField sx={{...}} id="outlined-number" label="Nu ...

cssmaterial-ui

How come my header is not spanning the full width of the page?

Hey there, I've been struggling with a specific issue on my website and can't seem to find a solution anywhere else. The header on my site is supposed to stretch across the entire width of the screen, but for some reason, there's always a ga ...

htmlcss

I want to update the toggle switches within the GridToolbarColumnsButton component from MUI's DataGrid to checkboxes

Currently, I am developing a website where one of the pages has tabular data fetched from the backend. To filter this table, I utilized Mui filters from datagrid({...data}components={{ toolbar: CustomToolbar }}). Among these filters is a GridToolbarColumns ...

cssreactjscheckboxmaterial-uidatagrid

Adjust the height of column divs to equal the height of their parent container

Looking for a solution: I have multiple divs in a column layout and I want them to expand to match the original height of the parent. The parent's height is not fixed as it is part of a flex-based page design. Can this be done? In the example provid ...

cssflexbox

Incorporate a Flask variable into a webpage seamlessly without refreshing the page

I am facing a challenge in importing the variable test_data from Flask to my webpage without having to reload it. I have tried clicking a button, but haven't been successful so far. Any suggestions? Flask: @blueprint.route('/data_analysis' ...

javascriptjqueryhtmlajaxflask

What is the process of modifying a row within an HTML grid?

I created a grid using the following code snippet: newcontent += "<tr><td class=\"row\">" + a[i][0] + "</td><td>" + a[i][1] + "</td><td class=\"edit\"><img class=\"editrow\" name=\" ...

jqueryhtmlgrid

What is the method to create a polygon in its entirety by utilizing a for loop within Javascript?

After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...

javascripthtmlhtml5-canvas

Is there any method to ensure that IE8 properly displays opacity for a `:before` pseudo element?

Here is a simple CSS snippet that I am working with... div:before { content: "Hello there"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } Check it out on jsFiddle. In Firefox 6, the :before pseudo element displays with t ...

cssinternet-explorer-8opacitypseudo-element

When working in Flask, I am experiencing an issue where my CSS is not linking to my

I am new to coding with HTML, CSS, and Flask and I have encountered an issue where my CSS styling only partially affects my HTML file. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

pythonhtmlcssflask

Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Anticipated outcome: Upon selecting an item, the Menu list will promptly close, and the Select component will no longer display a focus state. The borderBottom will change to 1px solid, and the backgroundColor will turn to white. Current situation: Sele ...

cssreactjsfocusmaterial-uihtml-select

JSON syntax error: "r" is not a valid token at the beginning position

Currently, I am in the process of developing a web server that is based on STM32 MCU. The workflow involves the browser sending a request to the MCU, which responds with a web HTML file. Users can then adjust parameters and use a form to submit them back t ...

javascriptjqueryhtmljson