F12 not properly displaying CSS variable declarations

Fixed, not yet flighted Issue #11594303

Details

Created
Apr 11, 2017
Privacy
This issue is public.
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

https://output.jsbin.com/filevis

open DevTools and choose the body element. You’ll see the following: body { --foo: ; } instead of the expected: body { --foo: bar; } and the value “bar” cannot be added.

Attachments

0 attachments

    Comments and activity

    • Original description (I tried to report it manually before but I was getting errors):

      CSS Variables seem to work in Edge 15 but their values are invisible in DevTools. See e.g. https://output.jsbin.com/filevis, open DevTools and choose the body element. You’ll see the following:

      body {
      –foo: ;
      }

      instead of the expected:

      body {
      –foo: bar;
      }

      When editing the variable value, you start with an empty string, the original value is invisible. No matter what you enter, the value is reset to an empty string.

      Therefore, developing a page relying on CSS variables is extremely difficult in Edge 15.

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Steps to Reproduce

      Changed Assigned To to “Balaji B.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Jordan B.”

      Changed Status to “Confirmed”

      Changed Title from “CSS vars handling broken in Edge DevTools; invisible, can't be set (open DevTools, choose body - no value) #EdgeBug” to “F12 not properly displaying CSS variable declarations”

      Changed Status from “Confirmed” to “In progress”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “Fixed”

      Changed Status from “Fixed” to “Fixed, not yet flighted”

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

    Sign in