Implement backdrop filter

Hey there,
I found a way to implement the backdrop filter effect to browsers, that dont support it yet.
however I did not quite understand the instructions:

CSS backdrop-filter polyfill

Demo: https://ahsane.github.io/backdrop-polyfill-chrome/index.html

Backdrop filter polyfill for browsers that do not support it

Safari already has backdrop-filter support, so this is not needed for it.

Documentation

Current limitation: This works only for static content.

First add the script
<script src="backdrop-polyfill-chrome.js"></script>

Then use the API
backdrop(backdropsource, backdropapply, blur, scroller)

backdropsource: The dom element where backdrop is going to be applied from

backdropapply: The dom element where backdrop is going to be applied to

blur: The amout of blur in px (equivalent to backdrop-filter: blur)

scroller: (string [yes/no]) Keep this to yes.

Example: backdrop(document.documentElement.outerHTML, document.getElementById('xx'), 20, "yes");

Can you help me to apply this to a header bar?

thanks for your help!

Hi there,

Please note that anything that is not natively supported by Pro and X that involves some customization goes beyond the scope of our support. However, we can try to have a look at your current implementation but we cannot be certain about the third party script’s compatibility with the theme.

With that, please provide the URL of the site in question and let us know which steps of the implementation that you have completed.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.