Reply To: [Solved] css3 transition opacity causing glitch in images

[Ryan Yurkanin]

Hey Ammar,

What you are encountering is definitely a Blink problem so it makes sense that it effects both Opera and Chrome.

First, I’ll tell you the solution to your problem is to add:

-webkit-transform: translateZ(0);
width: calc(100% + .49px);

to all of your images.

Secondly, here is the fiddle to prove it: https://jsfiddle.net/n9e7ove4/2/

Third, I’ll explain why this solution works. 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. By using a Transform on the image it follows the same process as when you are transitioning the opacity, thus you have consistent widths, then by adding .49px it makes sure all of the image widths will be rounded up.

Hope that works out for you :^)

EDIT: Updated Codepen!