Safari中的转换填充错误？

Question

我创建了一个小标题选项卡，悬停时有1秒的填充右移。我已经在Chrome，Opera，IE10和FF中测试过它，并且按预期工作。在Safari中奇怪的是它并没有完全实现转换。事实上，它也会将元素1px在悬停时向右移动。我还没有遇到过这样的具体情况，所以不确定它是我知道的错误还是疏忽。下面是代码：

HTML

<h2 class="screen-button about-button">About</h2>

CSS

.screen-button { 
    border-radius: 0 0 14px 14px; 
    float: left; 
    font-size: 2em; 
    margin: 0; 
    padding: .3em .5em .4em; 
    position: relative; 
    top: 0; 
    left: 0; 
    -webkit-transition: padding-right 1s ease-in-out; 
    -moz-transition: padding-right 1s ease-in-out; 
    -o-transition: padding-right 1s ease-in-out; 
    -ms-transition: padding-right 1s ease-in-out; 
    transition: padding-right 1s ease-in-out; 
} 

.screen-button:hover { 
    padding-right: 91%; 
} 

.about-button { 
    background: rgb(69,237,248); 
    background: rgba(69,237,248, .8); 
} 

这里是小提琴： http://jsfiddle.net/julsfelic/m429p/1/

Answer 1

的问题是，要动画从em到%并在Safari不起作用。尝试使用相同的单位设置正常和悬停状态的填充。至少填充右边（例如：padding: .3em 3% .4em）。