CSS“backdrop-filter：blur”仅在 IOS 上不适用于嵌套元素

Question

我在 WordPress 上创建了这个菜单，并使用 CSS 对其进行了自定义，使其具有属性“backdrop-filter:blur();”的“哑光玻璃”效果。桌面上的菜单一切都很好，因为没有任何子菜单。在移动设备上，我立即注意到“backdrop-filter”属性不适用于嵌套菜单（汉堡包）。我在 StackOverflow 上阅读了解决方案，这个解决方案有效（backdrop-filter 不适用于 Chrome 中的嵌套元素），但仅适用于 Android 手机！在 iPad 和 iPhone 上，无论我使用什么浏览器（Safari、Chrome 等），我仍然无法使模糊属性发挥作用。

这是它在 Android 上的样子

这是它在 iPhone 上的样子

我只能提供 CSS，因为菜单的 HTML 是由 Wordpress 生成的。 正如你所看到的，我已经尝试使用“-webkit-”CSS 前缀。

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

我遇到了同样的问题，我通过对容器背景使用伪类并在其上应用了background-filter:blur来修复它，这样带有background-filter的内容元素也可以工作。