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

In code review Issue #11805874 • Assigned to Saqib A.

Details

Created
Apr 27, 2017
Privacy
This issue is public.
Reports
Reported by 6 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”

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

    Sign in