Broken CSS-Var when using "display: none" in Edge

Issue #18968538 • Assigned to wptlaytri

Details

Author
Stefan S.
Created
Sep 12, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Hi,

I detected a possible bug in Edge with CSS variables.

Here is a very small example that reproduces general problem: https://jsfiddle.net/50mqy8p1/55/

"
.foo {
–display-var: flex;
display: none;
}

@media (min-width: 320px) {
.foo {
display: block;
display: var(–display-var, block);
}
}
"

The container ‘.foo’ should be visible at 320px+ but it isn’t.
I figured out 2 work-arounds (or let’s call it a “hack”):

1.) Add another rule to the first .foo selector:

"
.foo {
–display-var: flex;
display: none;
display: var(–something-that-may-not-exist, none);
}
"

2.) Devide the 2 CSS directivies inside the media query:

"
@media (min-width: 320px) {
.foo {
display: block;
}
.foo {
display: var(–display-var, block);
}
}
"

But this can’t be a real solution. Looks like a bug?
No other browser has this issue.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “wptlaytri”

    You need to sign in to your Microsoft account to add a comment.

    Sign in