Transition on img element cause size change or moving

user_325661 0
Viewed 1759

I do opacity transition on img element as it is in here and i see that img size changing or img is moving when transition on end or start;

Here is simple css code for styling.

img{
    height:165px;
    width:165px;
    opacity:0.4;
    transition: all linear 1s;
}

img:hover{
    opacity:1;
}

I tested it on Chrome 31 version. How can i get rid of this problem ?

Edit: This problem appears when Chrome browser is in bigger zoom like 110% or 125%

css html
4 Answers

Adding a 1px transparent border to the right of the element fixed this for me. I had a grid of images with no space at all between them, and this bug would cause some of them to expand by 1 pixel horizontally when the transition happened.

-webkit-transform: translateZ(0); does work, however, it also changed the width of some of the images by 1px permanently. (This fix also changes the width of the images by 1px permanently, but at least it's consistent.)

I ended up liking the look of a 1 pixel border more anyway and so I kept it, but this obviously won't be a fix for everyone because it changes the look of your page.

user_12044340
Related