When I hover over, the font awesome icon and text on this transition increase in size.
All browsers work well with this effect except for IE 11.
This example demonstrates the same transition using px (class test1) and em (class test2). While using px works fine, the issue arises with the following conditions:
Effect: transition
Type: pseudo-element
Property: font-size
Unit: em
Browser: IE 11
.test1 span{
font-size: 40px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test1::before{
font-family: FontAwesome;
font-size: 20px;
content: "\f08e";
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test1:hover span{
font-size: 80px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test1:hover::before{
font-size: 40px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2 span{
font-size: 1em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2::before{
font-family: FontAwesome;
font-size: 0.5em;
content: "\f08e";
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2:hover span{
font-size: 2em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2:hover::before{
font-size: 1em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}<html>
<head>
<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
</head>
<body>
<table>
<tr style="font-size: 40px;">
<td class="test1">
<span>Text 01</span>
</td>
</tr>
<tr style="font-size: 40px;">
<td class="test2">
<span>Text 01</span>
</td>
</tr>
</table>
</body>
</html>Is there something missing here? Could it be a known issue with IE?
A similar problem can be found here, but it discusses a different problem specific to IE.