all" causes strange color effect

Confirmed Issue #9988855

Details

Author
stefan k.
Created
Nov 29, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
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:
http://jsfiddle.net/JfGVE/1698/

CODE:
HTML:
<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>

SCSS:
.fa {
color: blue;
}

.sampleTransitionAll {
transition: all 0.5s linear;

}
.sampleTransitionColor {
transition: color 0.5s linear;
}

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

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Status to “Confirmed”

    • Known issue. Duping to our internal one.

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

    Sign in