The backdrop-filter attribute doesn’t function properly in the additional CSS

  • Unknown's avatar
    marcosogs · Member ·

    Why does the “backdrop-filter” attribute get removed from my additional CSS when I save and refresh the editor?

    I’ve added the following CSS code:

    .site-header {background: rgba(0, 0, 0, 0.5) !important;-webkit-backdrop-filter: blur(20px) !important;backdrop-filter: blur(20px) !important;}

    It works fine on the real-time demonstration. But after clicking the save button and refreshing the page, the CSS is modified to:

    .site-header {background: rgba(0, 0, 0, 0.5) !important;}

    The blog I need help with is: (visible only to logged in users)

  • aleone89 · Staff ·

    Hey there,

    Many thanks for reaching out!

    When I look at the code: 

    .site-header {background: rgba(0, 0, 0, 0.5) !important;-webkit-backdrop-filter: blur(20px) !important;backdrop-filter: blur(20px) !important;}

    ..Something doesn’t seem quite accurate – have you obtained this code from somewhere on the web?

    Additionally, what are you looking to change exactly with this CSS code?

    Many thanks and looking forward to hearing from you!

    Speak soon!

  • Unknown's avatar
    marcosogs · Member ·

    Hello! I’d like to apply a blur effect to my .site-header element using the Additional CSS feature.

  • aleone89 · Staff ·

    Hey there,

    Thanks for that confirmation.

    It looks like you have 1200+ lines of CSS in place – which is quite a lot. It’s possible at this point that the CSS could be conflicting with another.

    To check, where did you obtain this original code from?

    The reason why I ask is because, with this amount of custom CSS, you may wish to consider changing to a theme that is less reliant on code, and more built within the full site editor: https://en.support.wordpress.com/site-editor/ – or a third party theme, that has the design features already built in.

    Out of curiosity, is there site out there, you’re looking to emulate or compete with? Looking forward to hearing from you!

  • Unknown's avatar
    marcosogs · Member ·

    Hey mate!

    I’ve already ruled out the possibility of a CSS conflict by eliminating all other lines and exclusively modifying the .site-header class. However, the issue still persists, as the blur effect isn’t being applied. Upon further investigation, it appears that the backdrop-filter attribute is missing in the final asset (custom-style.css), seemingly removed during the compilation process.

    Regarding the source of the CSS, I’ve personally customized it.

    Regarding your earlier suggestion, I’m unable to locate the option to edit my theme as you mentioned. Could this limitation be specific to the theme I’m using or possibly linked to my Premium plan?

    In any case, could you please confirm whether it’s intentionally impossible to use the backdrop-filter attribute through additional CSS? If this is indeed the case, could you shed light on the reasons behind this limitation, such as plan-related or security restrictions, for example?

  • Unknown's avatar
    marcosogs · Member ·

    I apologize for not responding to your last question. I’m looking for an effect demonstrated on this website: https://blur-behind-nav.webflow.io/

  • supernovia · Staff ·

    Hi!

    Regarding your earlier suggestion, I’m unable to locate the option to edit my theme as you mentioned. Could this limitation be specific to the theme I’m using or possibly linked to my Premium plan?

    It is specific to the theme you’re using; Site Editor compatible themes came out about a year ago. This one supports blocks but not full site editing, so you may want to convert over. It could make sense to work with a test site first.

    I’ve added the following CSS code:

    .site-header {background: rgba(0, 0, 0, 0.5) !important;-webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important;}


    It works fine on the real-time demonstration. But after clicking the save button and refreshing the page, the CSS is modified to:

    .site-header {background: rgba(0, 0, 0, 0.5) !important;}

    Ah, yup; I tested on mine and saw the same thing. We’ll check in to see why it’s being filtered. Thanks!

  • supernovia · Staff ·

    Okay, I can confirm this is being removed by our CSS tidying script. I’m not positive why, yet, but we’ll file a request to have that setting allowed. Thank you!

  • Unknown's avatar
    marcosogs · Member ·

    Ok. I’m eager to understand the reason behind this particular attribute being filtered or whether it was, in fact, a bug that has been resolved. I would greatly appreciate being kept informed about this.

    Thank you all for your attention!

  • supernovia · Staff ·

    We use an allow list for code, and this backdrop-filter attribute isn’t on it yet, but I’ve filed that request!

  • Unknown's avatar
    sdkatelier2023 · Member ·

    is there an update on this? I’m looking into use this feature aswell

  • Unknown's avatar
    aisajib · Member ·

    Hi there!

    We don’t have an update on this yet, I’m afraid. We’ll keep you informed.

    Thanks!

  • Unknown's avatar
    pfcapx · Member ·

    I want to use this too 🙋

  • supernovia · Staff ·

    Thanks @pfcapx, I’ll add your vote!

  • The topic ‘The backdrop-filter attribute doesn’t function properly in the additional CSS’ is closed to new replies.