This is a highly specific problem that other people probably won't come across very often. My job has a name that begins with "Mc," and we have some code for the website that automatically makes the "c" in "Mc" small, because our many content creators often get this wrong. The code does this by inserting a span element around the 'c' with a class attached to some styling.
On the site I'm working on now, there's a link with the name in it that is supposed to transition from one color to another on hover. The problem is that this little 'c' transitions slower than the rest of the string inside the 'a' element. However, as I said in the title, this is problem ONLY in Chrome.
I've created a simple jsFiddle that reproduces this issue: https://jsfiddle.net/2z07neyL/2/
Markup:
<ul>
<li>
<a href="/">Work at M<span class="minyC">c</span>Creary's</a>
</li>
</ul>
Styling:
* {
transition: color 0.15s ease, background-color 0.15s ease;
}
li a {
color: white;
}
li a:hover {
color: #bf5700;
}
I'm pretty stumped on this one. Getting rid of the minifying code is not an option, neither is removing the transition.
EDIT: When I say I can't remove the transition, I mean I can't remove the transition for the * rule specifically. That rule covers more than this one element.
EDIT2: This problem has been solved, per the comments: https://jsfiddle.net/2z07neyL/6/