#EdgeBug CSS variables don't inherit into SVG <use> element shadow tree. https://t.co/gexvj5DSjT

Fixed, not yet flighted Issue #11805874

Details

Created
Apr 27, 2017
Privacy
This issue is public.
Reports
Reported by 7 people

Sign in to watch or report this issue.

Steps to reproduce

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Kevin B.”

      Changed Status to “Confirmed”

    • The EdgeBug bot didn’t seem to grab the tweet text. Title of the issue is “CSS variables don’t inherit into SVG element shadow tree.”

      https://twitter.com/MSEdgeDev/status/857428005257232385

      See also replies with screenshots from a more complicated demo, where I had the following @supports test that failed:

              .warning .icon {
                  color: darkGoldenrod; 
                  /* fallback, if CSS variables aren't supported */
              }
              @supports (--css: var(--iables)) {
                  .warning .icon { color: inherit; }
              }
      
    • Microsoft Edge Team

      Changed Steps to Reproduce

      Changed Title from “#EdgeBug” to “#EdgeBug CSS variables don't inherit into SVG &lt;use&gt; element shadow tree.This is so tragic…https://t.co/gexvj5DSjT”

    • I resolved the internal bug to this public bug and moved over the repros and numinstances encountered. Set to similar pri/sev and assigned to appropriate feature team.

    • Clarification of the "supports test failed": The parser is working correctly, it just isn’t giving useful results because of the bug.

      Contextual CSS for the web page is:

              .warning {
                  background-color: #222;
                  color: gold;
                  
                  --icon-sign-text: black;
              }
              .warning .icon {
                  color: darkGoldenrod; 
                  /* fallback, if CSS variables aren't supported */
              }
              @supports (--css: var(--iables)) {
                  .warning .icon { color: inherit; }
              }
      

      The actual icon has code like this:

              
      

      The assumption is that if the CSS @supports test passes, the icon won’t be white anymore, so we don’t need to change the background (which is set to currentColor) to increase contrast.

      As I said, it’s a slightly more complicated demo. The CodePen is the nice green-vs-red test case.

    • Microsoft Edge Team

      Changed Title from “#EdgeBug CSS variables don't inherit into SVG &lt;use&gt; element shadow tree.This is so tragic…https://t.co/gexvj5DSjT” to “#EdgeBug CSS variables don't inherit into SVG &lt;use&gt; element shadow tree. https://t.co/gexvj5DSjT”

      Changed Title from “#EdgeBug CSS variables don't inherit into SVG &lt;use&gt; element shadow tree. https://t.co/gexvj5DSjT” to “#EdgeBug CSS variables don't inherit into SVG <use> element shadow tree. https://t.co/gexvj5DSjT”

      Changed Assigned To from “Kevin B.” to “Saqib A.”

      Changed Status from “Confirmed” 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