CSS transition padding glitch in webkit browsers

csscss-transitionsgoogle-chromewebkit

When I use padding in a css transition, webkit browsers (safari osx, Chrome osx & Chrome windows) have a little glitch at the start and the end of each transition, resulting in a 1px movement of elements placed after the animated element.

http://jsfiddle.net/QG4QV/19/

HTML

test test test <span class="test">Hover me</span> test test test test

CSS

.test{
  color:#FFF;
  background:#000;
  padding:4px 4px 4px 30px;
  transition: padding 0.5s linear;
}

.test:hover{
  padding:4px 30px 4px 4px;
}

I've searched and tried various solutions, but nothing solves this example?!
CSS transition glitch
CSS transition effect makes image blurry / moves image 1px, in Chrome?

(Example filled with possible solutions: http://jsfiddle.net/QG4QV/18/ , but nothing works)

Best Answer

I do not know if there is another explanation for the glitch. I would guess that the animation of padding values is causing rounding inconsistencies during the transitioning which have an affect on the overall width of the .test element.

I found that the following CSS fixes it for me in Chrome33.

test {
    display:inline-block;
}

Demo

Edit: So looking at the element in the Chrome DevTools, without display:inline-block the "Hover Me" text itself has a width=auto and height=auto computed style.

With the inline-block the text has a computed style of width=60 and height=20. I think it is this hard computed style that stops the transition glitching.

Related Topic