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过渡故障 CSS过渡效果使图像模糊/移动图像1px,在Chrome？

(示例填写了可能的解决方案:http://jsfiddle.net/QG4QV/18/,但没有任何作用)

Answer 1

我不知道是否有另一个故障的解释.我猜想填充值的动画在转换过程中会导致舍入不一致,这会影响.test元素的整体宽度.

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

test {
    display:inline-block;
}

演示

编辑:那么看在元素的Chrome DevTools,没有display:inline-block了"悬停我"文本本身就具有width=auto和height=auto计算样式.

随着inline-block文本的计算风格width=60和height=20.我认为正是这种硬计算风格阻止了过渡故障.