webkit浏览器中的CSS过渡填充故障

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

HTML

我已经搜索并尝试了各种解决方案，但没有任何解决方案可以解决此示例？！

---

（示例中充满了可能的解决方案：，但没有任何效果）

我不知道是否还有其他原因可以解释此故障。我猜填充值的动画在转换期间会导致舍入不一致，这会影响

.test

元素的整体宽度

我发现下面的CSS为我在Chrome33中修复了它

test {
    display:inline-block;
}

编辑：因此，在没有

display:inline块的情况下查看中的元素，“Hover Me”文本本身具有
width=auto
和
height=auto
计算样式

使用
内联块
时，文本的计算样式为
宽度=60
和
高度=20
。我认为正是这种难以计算的风格阻止了过渡故障。
不幸的是，在Safari中，问题仍然存在。啊，很抱歉，我没有在这里测试Safari。我稍后再试试另一台机器。
.test{
  color:#FFF;
  background:#000;
  padding:4px 4px 4px 30px;
  transition: padding 0.5s linear;
}

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

test {
    display:inline-block;
}