CODEWITHSUNDEEP
cssmicrosoft-edge
BBaysinger
BBaysinger

Reputation: 6987

CSS.supports in Edge returns incorrectly for items that are supported

CSS.supports() in Edge returns incorrectly for properties that are apparently supported.

console.log(CSS.supports("( filter: blur(20px) )"));
console.log(CSS.supports("filter", "blur(20px)"));
console.log(CSS.supports("( backdrop-filter: blur(20px) )"));
console.log(CSS.supports("backdrop-filter", "blur(20px)"));

Logs:

true
true
false
false

The last two are incorrect, as backdrop-filter does actually work in Edge.

However this works as expected:

@supports (backdrop-filter: blur(20px)) {
    body { border: 20px solid red; }
}

Am I missing something, or is CSS.supports broken in Edge? And how can I detect support for backdrop-filter?

Upvotes: 1

Views: 178

Answers (2)

BoltClock
BoltClock

Reputation: 723468

Microsoft Edge does not support the unprefixed backdrop-filter property; it only supports -webkit-backdrop-filter.

If your CSS works, it's either being prefixed at runtime by a script like -prefix-free (although -prefix-free itself is not known to support backdrop-filter), or postprocessed by something like Autoprefixer, silently adding the -webkit- prefix for you.

Upvotes: 2

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

As per the documentation below, Currently CSS Backdrop Filter only supported with the -webkit- prefix (not -ms-) in MS Edge browser.

CSS Backdrop Filter

Because of that reason, It returns false.

Upvotes: 0

Related Questions