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

当我在css过渡中使用填充时,webkit浏览器(safari osx,Chrome osx和Chrome窗口)在每个过渡的开始和结束时都会有一点小故障,导致在动画元素之后放置1px元素.

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

HTML

test test test Hover me 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/,但没有任何作用)