Question

There are some buttons on this page (the small icons toward the bottom) that I am using some css transitions to change the background of. But there is a flicker the first time the icons are hovered over! I’ve tried to implement the suggestions offered on this thread, but to no avail. Has anyone an idea on how I can make this work without the flicker?

Thank you so much!

Answer 1

Since no minimal testcase provided, I can suppose your images need to be preloaded, and transitions has nothing to do with the issue.

A background image can be preloaded by specifying it as background for normal (not hover) state of an element, and adding background-position with negative value so that background image is not visible in normal state.

For example:

/* Image is supposed to have height less than 100px here. */
A {
    background: url(example.png) 0 -100px no-repeat;
}

A:hover {
    background-position: 0 0;
}

By the way, it’s established practice to put images for both states (normal and hover) to one physical image file, and then just change background-position on hovering:

/* "rollover-sprite.png" file contains images for both states side by side. */
A {
    background: url(rollover-sprite.png) no-repeat;
}

/* Width of image for each state is supposed to be 100px here
  (sprite will be ~200px wide). */
A:hover {
    background-position: -100px 0;
}