css @support not working on mobile browsers

i'm trying to use the backdrop-filter property on browsers that support it and background-color on browsers where it is not supported.

 @supports not (
  (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))
) {
  .backdrop-filter {
    background-color: black;
  }
}
@supports (
  (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))
) {
  .backdrop-filter {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

The above code works fine on web browsers but I don't get the desired results on mobile browsers. Did I get the syntax wrong?

Thanks in advance!