Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Edge evaluates @supports(mask) as true when mask isn't supported

Tags:

Edge doesn't support CSS mask, yet the @supports statement below is calculating as true and the enclosed styles are being applied in Edge. What can I put into the @supports argument to get Edge to ignore the conditional block

body {
  font-family: monospaced;
  color: red;
  background-image: url(test.png);
}

@supports(mask: url("")) {
  body {
    background-color: #eee;
    font-family: sans-serif;
    color: rebeccapurple;
    mask: url(test.svg);
    mask-size: cover;
  }
}
<h3>This should be red and mono-spaced in Edge</h3>
like image 445
Lounge9 Avatar asked Mar 12 '18 09:03

Lounge9


1 Answers

According to the Edge API docs, mask is supported, but since I'm ultimately just looking for support of a mask image, I can do:

@supports(mask-image: url("")) {
  body {
    …
    mask-image: url(test.svg);
    …
  }
}

Cleaner and more specific.

The docs mention that a maskImage style property is supported, but I can't get that to work.

like image 183
Lounge9 Avatar answered Oct 11 '22 10:10

Lounge9