Css Filter property in webflow is incompaitble with other web browsers

Community resources
1

I noticed that building an absolute gradient using filter blur CSS property is incompatible with Firefox browser… it is not giving the desired previewed result as i can see in webflow preview or chrome browser … safari seems to be struggling as well…

how do i fix this browser compatibility problem , here is the read only link
https://preview.webflow.com/preview/luxledtree?utm_medium=preview_link&utm_source=designer&utm_content=luxledtree&preview=9c0968dcacbe3b628896ec49430d1bad&workflow=preview

2

Welcome to web development. Blink ( Chrome ), Gecko ( Firefox ), and WebKit ( Safari ) can all interpret CSS rules differently and offer different support for rendering.

The general approach is;

  • Use caniuse to identify what features are supported by your target audience
  • Add custom CSS or shivs for specific feature ( like blur ) that will close the gap on unsupported features
  • Use fallbacks when necessary. Unsupporting browsers won’t look the same but will still look good if you prepare accordingly.

In a pinch you might be able to use some more advanced techniques like SVG filters, or JS to detect and adjust what you’re rendering. But this often involves a lot of R&D work and you’ll still likely make some compromises.