DEV Community

ann lin
ann lin

Posted on

CSS Flicker on Hover!

Feeling lucky so I decided to do a simple hover effect. A really simple CSS styling. Cursor hovers on button, button moves down to simulate a click effect. So simple, nothing could go wrong. I was wrong.

Hover and move the button down,

button:hover {
    margin-top: 10px;
Enter fullscreen mode Exit fullscreen mode

I encountered intense flickering from my button. I checked the issue on different browsers. Firefox is the only one that doesn't have that problem. Chrome, opera, safari have the same flickering problem. (You go Firefox! Not sure what you have done there, but you probably shouldn't have.)

Play with the flicker here,

What's really going on,

I drew this

Instead of googling I decided to tweet out the issue,

and @matthew_coxx came out with a sweet solution. (I am getting lazier now.)

The idea is to add an ::after pseudo element to fill the previous clickable area so the cursor still stays within the clickable area even though the button has moved. Simple and sweet.

Play with the solution here,

But I still googled for the issue anyway,

and there there, I managed to find this great post on CSS Jitter dated 11 years ago.

Now you know what's going on, the jitter man example is just hilarious.



Follow me at Twitter

Top comments (5)

sebastianservat profile image
Sebastian Servat

Thanks for sharing! Great approach!

pavelstefan profile image
Pavel Stefan

This is my solution to fix the flicker(I tested it on chrome)

<div id="container">

#container:hover button {
  margin-top: 10px;

annlin profile image
ann lin

another sweet solution! so it's either more css or more html tag.

mikiqex profile image
Michal Novák

I know my Firefox 52.8 ESR is fairly outdated, I just want to let you know the solution flickers in it as well.

annlin profile image
ann lin

ohhh nice, mine's pretty new. 61.0.2 , so they did fix it on purpose or not.