CSS "backdrop-filter: blur" doesn't work on nested elements only on IOS

Question

I have created this menu on WordPress and customized it with CSS to give it a "matte glass" effect with the property "backdrop-filter: blur();". Everything is good with the menu on desktops since there isn't any sub-menu. On mobile, I immediately noticed that the "backdrop-filter" property wasn't working on the nested menu (hamburger). I read solutions here on StackOverflow and this one worked (backdrop-filter not working for nested elements in Chrome), but only for Android phones! On iPads and iPhones, I still can't make the blur property work, no matter what browser I use (Safari, Chrome, etc.).

Here it's how it looks on Android

Here it's how it looks on iPhone

I can provide only CSS since the HTML of the menu is generated by Wordpress. As you can see, I already tried using "-webkit-" CSS prefix.

CSS

/* blur menu header */

.ush_hwrapper_1{
    transition: background 0.1s ease-out;
}


.l-header .ush_hwrapper_1{
    background-color: #f0f0f088 !important;
}

.l-header .ush_hwrapper_1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 70px;
    top: 25px;
    left: 0;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    z-index: -1;
}

.l-header.sticky .ush_hwrapper_1{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: #f0f0f000 !important;
}

.l-header.sticky .ush_hwrapper_1::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
    z-index: -1;
}

.l-subheader.at_middle, .l-subheader.at_middle .w-dropdown-list, .l-subheader.at_middle .type_mobile .w-nav-list.level_1{
    transition: all 0.1s ease-out;
}

.l-header.sticky .l-subheader.at_middle, .l-header.sticky .l-subheader.at_middle .w-dropdown-list{
    background-color: #f0f0f088 !important;
    transition: all 0.3s ease-out;
}

.l-header.sticky .l-subheader.at_middle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    z-index: -1;
}


@media only screen and (max-width: 800px) {
    .l-header .ush_hwrapper_1 ul.w-nav-list.level_1.hover_simple{
        margin: 5px 17px;
        border-radius: 5px;
    }
    
    .l-header.sticky .ush_hwrapper_1 ul.w-nav-list.level_1.hover_simple{
        margin: 0;
        border-radius: 0px;
    }
    
    .w-nav-list.level_1{
        background-color: #f0f0f088 !important;
        -webkit-backdrop-filter: blur(20px) !important;
        backdrop-filter: blur(20px) !important;
    }
    
    .l-header .ush_hwrapper_1::before {
        top: 10px;
    }


}

Answer 1

I had same problem, I fixed it by using a pseudo class for the container background with a backdrop-filter:blur applied on it, in this way the content element with backdrop-filter too works.