Pseudo-element color should not transition with element color

Fixed Issue #4320439

Details

Created
Aug 21, 2015
Privacy
This issue is public.
Reports
Reported by 7 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

  1. Launch Edge browser
  2. Visit test case at http://codepen.io/jackplug/pen/jPjKMz
  3. mouse over the word ‘text’ or the icon - the text color changes (correct), but the generated content (inside the green box) also passes through color changes (incorrect/inconsistent)

Expected Results:

The color of the generated content should not change (this is the observed behaviour in other browsers, including IE11)

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Assigned To to “Rossen A.”

      Changed Status to “Confirmed”

    • As this issue does not include the comments from the original location I will add them here:


      Posted by Ibrahim [MSFT] on 8/21/2015 at 8:00 AM
      Hello jackplug,

      Thank you for your feedback. We will be investigating this issue further.

      Best regards,
      The Microsoft Edge Team


      Posted by Christof7 on 8/22/2015 at 3:09 AM
      This is not just for generated content, see additional demo here http://jsbin.com/xacivo/edit?html,css,output
      Element with a fixed color inside a link which transitions its own color strangely flickers before regaining its color. It should just keep its color all the time. Sadly we have a webapp mainly targeting windows tablets and with Metro IE gone would now prefer Edge which runs into this problem so a fix in the nearer time would be great


      Posted by jackplug on 3/14/2016 at 8:42 AM
      Guys, is there any movement on this problem? Just took a look in the current version of Edge and I can still see the problem (on my original link and on the example posted by Christof7

    • Is there any movement yet? I am experiencing the same issue. any links that I haven’t programmed with the transition has this problem. I can’t do this for every link all the time, and it’s seriously inconvenient.

      -ms-transition: ease-in-out .15s;
      transition: ease-in-out .15s;

    • This issue still remains in Edge 38.14393.0.0.

      Like above, it’s inconvenient, it can be worked around for some links, but sometimes it’s not ideally possible.

    • Microsoft Edge Team

      Changed Title from “CSS transition property - colors inside link do not behave correctly (inconsistent with other browsers)” to “Pseudo-element color should not transition with element color”

    • I see the behavior you’re reporting. As a temporary work-around, use transition: color instead of transition: all. This appears to resolve the behavior for me. See https://jsfiddle.net/jonathansampson/zsL6g0po/.

    • So, I came up with a ‘heavy-handed’ workaround for this (involving specifying the icon color for all states), but transition: color is a so much cleaner fix, at least in this use-case. Thanks for the suggestion, Jonathan (but hopefully, this will still get a look at some point :))

    • You can reproduce it even without a pseudo element (just a child element):

      https://jsfiddle.net/jslowack/1u1u12nu/

    • Microsoft Edge Team

      Changed Assigned To from “Rossen A.” to “Nikolay G.”

      Changed Status from “Confirmed” to “Not reproducible”

      Changed Assigned To to “James M.”

      Changed Status from “Not reproducible”

      Changed Status to “Fixed”

    • Hello,

      Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 16299 and is available in our Insider Preview build in the Fast ring.

      Best Wishes,
      The MS Edge Team

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

    Sign in