CODEWITHSUNDEEP
cssperformancehovermousetransition
Antoine L
Antoine L

Reputation: 11

issue with color transition on hover and mouse speed

I'm having an issue with a color transition on firefox and chrome, depending on the mouse speed when it passes on each element. I have a logo, I want to change the color of each letter immediately when the mouse cursor passes on them, and then get the original color back with a fading transition. The issue is that when you pass across the logo too quickly, some letters are discarded and the animation isn't trigerred.. I have this issue with FireFox and Chrome but not with Edge.

Here is the HTML :

<div id="logo"><span class="letter">L</span><span class="letter">O</span><span class="letter">G</span><span class="letter">O</span></div>

And the CSS : 

#logo > .letter{
  font-size: 5em;
  color: red;
  transition: color .5s ease-in .2s; 
}

#logo > .letter:hover {
  color: black;
  transition: color 0s ease-in 0s;
}

Here is a codepen : https://codepen.io/anon/pen/gjLrrZ

Just pass your mouse horizontaly on the LOGO quickly and you'll see what I mean.

So the question is, should I do this with JavaScript ? Because CSS should have better performance am I right?

Upvotes: 1

Views: 143

Answers (1)

Michael Abeln
Michael Abeln

Reputation: 2587

You're actually building this correctly I believe.

What you're experiencing is that the mouse is moving too quickly for the mousemove event to register on top of every logo letter.

Edge probably just has better performance with registering the event and triggering the CSS change.

CSS will have the best performance, you're correct there.

You might try adding an additional event listener (hover event on top of .letter through Javascript) and pairing the two together, but otherwise I don't think you'll find an effective solution to speeding up mousemove registrations on specific browsers.

Hope this helps!

Upvotes: 1

Related Questions