CSS transition padding glitch in webkit browsers
css, css-transitions, google-chrome, webkit
Solution
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.
Problem
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)