`backdrop-filter` dropped when `-webkit-backdrop-filter` present, breaking styles

[rameshvarun]

I have the following input CSS.

.glass {
  background: rgba(30, 31, 33, 0.6);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

It minifies to the following, dropping the backdrop-filter

.glass{-webkit-backdrop-filter:blur(16px)saturate(1.2);background:#1e1f2199}

However the minified version doesn't seem to work in Firefox and Chrome. Both seem to ignore -webkit-backdrop-filter. As a result I was getting inconsistent behavior across my dev and prod build (the unminified version works in all three browsers, but the prod version only works in Safari).

This behavior seems backwards - I would expect both properties to be preserved in this case. Or -webkit-backdrop-filter to be dropped since backdrop-filter is baseline.

Repro in Playground Link

[rameshvarun]

This is not the same as #537.

[rameshvarun]

Order seems to matter:

/* Original */
.glass {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* Minified */
.glass{-webkit-backdrop-filter:blur(16px)saturate(1.2)} /* This result is broken */

/* Original */
.glass {
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

/* Minified */
.glass{backdrop-filter:blur(16px)saturate(1.2)} /* This result is fine due to baseline. */

[janilowski]

I've stumbled upon the same issue, thank you for posting the workaround!

[chriswood1001]

Thank you! I also reproduced the error with -webkit- second, and confirmed the workaround by placing -webkit- first.