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;
}
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,
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. https://css-tricks.com/avoid-css-jitter/
Now you know what's going on, the jitter man example is just hilarious.
https://css-tricks.com/examples/CSS-Jitter/
Ok,
bye.
Follow me at Twitter
Top comments (5)
Thanks for sharing! Great approach!
This is my solution to fix the flicker(I tested it on chrome)
another sweet solution! so it's either more css or more html tag.
I know my Firefox 52.8 ESR is fairly outdated, I just want to let you know the solution flickers in it as well.
ohhh nice, mine's pretty new. 61.0.2 , so they did fix it on purpose or not.