Custom code not working on MacBook / safari

trying to get blurred header effect on my site arbala.co.uk but it is showing only on pc and google chrome but not working on safari / MacBooks. this is the code we used:

sticky-header.header-wrapper.color-background-2.gradient {
backdrop-filter: blur(20px) !important;
}

does someone know how to fix this issue?

Hey @livvywenstan ,
Some CSS properties require the -webkit- prefix for Safari and iOS (not all). This should work for you.

sticky-header.header-wrapper.color-background-2.gradient {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

Hi, I am having the same issue for my custom CSS I created to decrease the size of some PDP text next to my pricing.

But the change is only updating on Chrome, Edge & not safari.

Please can you assist me here? Thanks, Talia