webkit浏览器中的CSS转换填充故障

Question

当我在css转换中使用填充时，webkit浏览器（safari osx，Chrome osx和Chrome窗口）在每次转换的开始和结束时都有一点小故障，导致在动画后放置1px的元素移动元件。

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;
}

我搜索并尝试了各种解决方案，但没有解决这个例子的问题？！ CSS transition glitch CSS transition effect makes image blurry / moves image 1px, in Chrome?

（示例填写了可能的解决方案：http://jsfiddle.net/QG4QV/18/，但没有任何效果）

Answer 1

我不知道是否有另外一个关于故障的解释。我猜想填充值的动画会导致过渡期间的舍入不一致，这会影响.test元素的整体宽度。

我发现以下CSS在Chrome33中为我修复了它。

test {
    display:inline-block;
}

Demo

修改：查看Chrome DevTools中的元素，没有display:inline-block “Hover Me”文本本身就有{{1} }和width=auto计算样式。

使用height=auto，文字的计算样式为inline-block和width=60。我认为正是这种硬计算样式可以阻止转换故障。