Image Opacity Transition Bug

Working on a project, I had an image which faded on hover.

a:hover img.fader {        
    transition: opacity 0.5s ease-out;
}
a:hover img.fader {
    opacity: 0.5;
}

I was getting a weird bug where the image would jiggle during the fade.

Thanks to this CSS Tricks thread, I learned the problem was that since this image was a responsive image and resizing based on the container it was possible for the image width to be a fractional value, which caused the problem during the transition.

The problem was being caused by fractional widths. For example using 100% width you could end up with a image that had width: 150.79px. Before the transition it would be rounded up to 151px, but during the transition it would be rounded down to 150px.

The solution provided by Ryan Yurkanin is to get the browser to perform the “rounding down” of the image size on initial load.

a:hover img.fader {        
    transition: opacity 0.5s ease-out;
}
a:hover img.fader {
    opacity: 0.5;
    -webkit-transform: translateZ(0);
    width: calc(100% + .49px);
}

Because this seems hacky (and I’ll never remember this solution), I wanted to document this for myself.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.