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