CSS Custom Properties Variables have known issues on before after and other pseudo-elements

Fixed Issue #11495448

Details

Author
François R.
Created
Apr 3, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
15.15062
Reports
Reported by 15 people

Sign in to watch or report this issue.

Steps to reproduce

Edge 15 shipped with support of Custom Properties. There are, however, known issues related to their usage in pseudo-elements. These issues will hopefully be ironed out by next version. In the mean time, if you encounter issues with var() in pseudo-elements or animation of pseudo-elements, it is very likely the issue is already known.

Please add a comment here with your reduced repro instead of filing a new issue.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Status

    • Hello,

      Thank you for providing this information about the issue. We are working on a solution for a future build of Edge, and we are presently tracking this issue as a duplicate of an existing internal bug report. We look forward to additional feedback you may have on how we can improve Microsoft Edge.

      Best Wishes,
      The MS Edge Team

    • Hey Edge team, awesome work on the newest version of Edge! I’m so excited to see the addition of support for CSS Custom Properties and I’ve been putting them to use! That being said, I’ve run into an issue when applying them to pseudo elements :before and :after and just wanted to make sure you’re aware of it.

      When attempting to apply two different colors via two different custom properties as background colors for an element it’s :before or :after pseudo elements, the property set on the :before or :after will also get applied to the containing element.

      Here’s a live example: https://codepen.io/brianmtreese/pen/aWmROR

    • Here’s another issue where the cascade is not working properly for border color applied to a :before pseudo element: https://codepen.io/brianmtreese/pen/MmJeWB

    • https://jsfiddle.net/tnzbxpnw/4/](https://jsfiddle.[https://jsfiddle.net/tnzbxpnw/4/](https://jsfiddle.net/tnzbxpnw/4/)

      The background color on the pseudo element should be semi-transparent.

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Status

      Changed Status to “Confirmed”

      Changed Assigned To from “James M.” to “Kevin B.”

      Changed Assigned To from “Kevin B.” to “Greg W.”

    • I do not have a reduced test case for this yet, since it’s been hard to track down what is causing this Single Div Accordion that heavily utilizes CSS Variables in pseudoelements to not render as expected. I used a workaround for a blocking issue that prevented it from even loading (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11975071/), but it still will not render as intended, with pseudoelements taking on (non-custom) property values of the main div. I will try to simplify this to narrow down what is really happening and where.
      Thanks!

    • Microsoft Edge Team

      Changed Status from “Confirmed”

    • Resolving dupe to the other bug that is known, feel free to continue to leave comments with issues. We’ll verify them once the other issue that this is duped to has been fixed.

    • The next update it scheduled for September, right?
      Pretty long time to wait for a couple of bug fixes.

    • Having an issue with :before and :after elements.

      See the issue on codepen

    • And another issue with the behavior of inherit on a pseudo element.

      See the issue on codepen

    • Microsoft Edge Team

      Changed Assigned To to “Greg W.”

      Changed Status to “Confirmed”

    • Removing duplicate status as there are several issues tracked here and I wouldn’t want this issue to be autoclosed while there are still remaining known issues.

    • This bug was driving me mad… The problem seems to be that pseudo-element properties set via a variable inherited from their owner elements are “up-inherited” to their owner element. Here’s a simple test case:

      
      
      
      p {
      color:green;
      }
      
      
      This paragraph’s text should be green. It should not
       be bold.
      
      

      For some (non-inherited?) properties such as left, it’s possible to override this “up-inheritance” using an !important declaration:

      
      
      
      p {
      left:0 !important;
      position:relative;
      }
      
      
      This paragraph should be near the left edge of the window.
      
      

      Otherwise, you have to provide code without variables to Edge or, in some cases, you can use custom, Edge-only CSS on the parent element to undo the "up-inheritance".

    • Note: My style and p tags as well as (less important) em and meta charset tags were stripped from the preceding code, So was the document type declaration. It’s easy enough for anyone familiar with HTML to infer where they should go though.

    • Will this be fixed until this years Fall Update?

    • Microsoft Edge Team

      Changed Status from “Confirmed” to “Fixed”

    • All of the issues stated below have been fixed by their respective own bugs on the issue to be release in the October 17 update to Windows 10. Thanks for all the feedback.

    • Glad to hear it’s fixed. :)

      I just noticed that much of the CSS was also stripped from the testcase code I posted previously, making the testcase code worthless. Seems that this issue tracker’s implementation of Markdown needs a fix.

      For the record for anyone wishing to reproduce this bug, the first bit of CSS should have been (sans Markdown):

      p { --color: red; --font-weight: bold; color: green; }
      p::after { color: var(–color); content: ""; font-weight: var(–font-weight); }

      The second bit should have been:

      p { --left: 15rem; left: 0 !important /* remove to trigger the bug */; position: relative; }
      p::after { content: ""; left: var(–left); }

    • And double hyphens are converted to em dashes. -_-

    • Bug with ::selection is still not fixed. Screenshot, demo.

      Edge 40.15063.0.0
      Windows 10 15063.632

    • fixed by their respective own bugs on the issue to be release in the October 17 update to Windows 10

    • I can confirm the issue on ::selection is fixed in the current Insiders Builds shipping as a release in two-three weeks.

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

    Sign in