Pseudo-element color should not transition with element color

Confirmed Issue #4320439 • Assigned to Rossen A.

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 need to sign in to your Microsoft account to add a comment.

    Sign in