• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Draft / Image Opacity Transition Bug

Image Opacity Transition Bug

Last updated on August 6, 2018 by Sal Ferrarello

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
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.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Solution Tagged With: CSS

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in