0

ホバー時に 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/

4

1 に答える 1

1

em問題は、Safariからアニメーション化したい場合%と Safari で動作しないことです。同じ単位を使用して、通常の状態とホバー状態の両方のパディングを設定してみてください。少なくとも右パディング (例: padding: .3em 3% .4em)。

于 2013-03-13T06:01:51.293 に答える