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）。