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

Confirmed Issue #11495448 • Assigned to Greg W.

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 12 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

    • 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.

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

    Sign in