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

Safari中的过渡填充错误？

1 个答案: