CSS Saturate filter Issue

-webkit-backdrop-filter: saturate(110%) blur(10px);
backdrop-filter: saturate(110%) blur(10px);

For saturate filter, it is giving me the error:

error evaluating function `saturate`: e.toHSL is not a function. (In 'e.toHSL()', 'e.toHSL' is undefined)

Is there a way around this?

I've recently encountered the same issue - is anyone else having it?

Same. It's when working with crazy filters (for me). 

Like below (awesomely generated) on this example, which is converted from this hex value: #5aa74c: https://codepen.io/sosuke/pen/Pjoqqp

filter: invert(54%) sepia(69%) saturate(365%) hue-rotate(64deg) brightness(93%) contrast(88%);

I think it must be a bug with Squarespace. I'm going to submit a ticket to see if it can be repaired, or at least get an answer as to "why" this is happening.

I found a fix in this answer from @brandon 

You need to write:

filter: ~'saturate(64%)';

Or if you were including multiple filters:

filter: ~'invert(39%) sepia(99%) saturate(64%)';

Cheers,

Katy

Correct, this will occur with any value that includes a word that Squarespace's LESS compiler recognizes and attempts to compile. In addition to those mentioned, "calc" will (mis)behave similarly. In such cases, one must escape it using the tilde syntax.

On 11/24/2020 at 2:55 PM, brandon said:

this will occur with any value that includes a word that Squarespace's LESS compiler recognizes and attempts to compile

One thing I didn't think to try @brandon — I should've tried adding just plain CSS in header injection, or right on the page in a code-block. Next-time.