Background Flicker on Hover in Chrome

Say you have a search bar with a submit button that changes background image (or background position) on hover. In my case, I’m using SVG files for the on and off background images, and I have a simple CSS-based preloader set up so that there’s no delay when mousing over the submit button the first time.

So imagine my surprise when my client comes back and says, “the search button is still flickering”! Even weirder, all the other buttons and links with the same preloading and hovering seems to work fine; it’s just this one search submit button and it’s only happening in WebKit browsers (Chrome, Opera, etc.). Here’s a preview:

Animation showing flickering mouseover effect in Chrome.

It seemed to me that perhaps the problem was related to the fact that the element is an input, while all other preloaded backgrounds are on a tags. Turns out it’s not that, it’s a CSS3 transition: all effect on inputs only, being taken too literally, perhaps. Set the property to none for just my misbehaving element and here’s the final effect:

Animation showing final, fixed result of smooth mouseover effect in Chrome.

About Kelly Carter

I'm a freelance web developer, doing business under the name Rainworks Web Development. I'm a skeptical technophile, voracious reader, softcore gamer, and haphazard tinkerer. I have a long-term partner, a cat, and no time for glass ceilings.

Speak Your Mind