Steps to reproduce
- Launch Edge browser
- Visit test case at http://codepen.io/jackplug/pen/jPjKMz
- 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)
The color of the generated content should not change (this is the observed behaviour in other browsers, including IE11)
Dev Channel specific:
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
Thank you for your feedback. We will be investigating this issue further.
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: colorinstead 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: coloris 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):