all" causes strange color effect

Not reproducible Issue #9988855


stefan k.
Nov 29, 2016
This issue is public.
Found in
  • Microsoft Edge
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I encounted a bug with "transition: all …", when applying different colors on a hover effect, a nested element with a fixed color, takes the color of the parent element, then the new color of the parent element and then it’s original color.

This effect doesn’t happen when “transition: color” is applied, but the color property is the only property which changes!

Here is a sample:

<a class="sampleTransitionAll"><span class="fa fa-phone"></span> The Icon changes color on hover, when “transition: all” is set (green --> red --> blue)</a>

<br />
<br />
<a class="sampleTransitionAll"><span class="fa">Same</span> with text only</a>

<br />
<br />
<a class="sampleTransitionColor"><span class="fa fa-phone"></span> Same code and Styling but only "transitions color", Icon doesn’t change color </a>

<br />
<br />
<a class="sampleTransitionColor"><span class="fa">Text</span> sample</a>

.fa {
color: blue;

.sampleTransitionAll {
transition: all 0.5s linear;

.sampleTransitionColor {
transition: color 0.5s linear;

a {
font-size: 2em;
color: green;
&:focus {
color: red;


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Status to “Not reproducible”

    • Known issue. Duping to our internal one.

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

    Sign in