在Safari中懸停按鈕的位置

我的目標是創建一個圓形圖標按鈕，其中一個圖標被圓圈包圍，並且該圓圈在懸停時收縮，但該圖標保持居中。在Safari中懸停按鈕的位置

我在Firefox和Chrome中使用這種效果，但在Safari 9中（我認爲它在Safari 10中類似），當我將鼠標懸停在按鈕上時，它們的垂直位置偶爾會意外上下移動。它似乎主要發生在快速更改哪個按鈕被徘徊時。

這是按鈕的HTML結構：

<a class='icon-button'> 
    <button> 
    <span class='bg'></span> 
    <span class='icon'>A</span> 
    </button> 
</a>

這是SCSS代碼我申請：

.icon-button { 
    $width: 2em; 

    display: inline-block; 
    width: $width; 
    height: $width; 
    overflow: hidden; 
    cursor: pointer; 

    button { 
    position: relative; 
    display: flex; 
    align-items: center; 
    text-align: center; 
    width: $width; 
    height: $width; 
    padding: 0; 
    margin: 0; 
    background: none; 
    border: none; 
    cursor: pointer; 
    } 

    .bg { 
    background-color: #FF9999; 
    width: $width; 
    height: $width; 
    border-radius: $width/2; 
    margin: 0 auto; 
    transition: width 128ms linear, height 128ms linear; 
    } 

    &:hover .bg { 
    width: 0.8 * $width; 
    height: 0.8 * $width; 
    } 

    .icon { 
    color: #FFF; 
    position: absolute; 
    top: 0; 
    left: 0; 
    line-height: $width; 
    width: 100%; 
    } 
}

這裏是一個的jsfiddle網頁，我複製的問題與相關的代碼：https://jsfiddle.net/Auroratide/6u463jL5/3/

有誰知道是什麼導致這種情況發生在Safari中，但不是其他瀏覽器？我可能會需要改變我的策略，所以CSS不是那麼簡單，但我很好奇。

UPDATE：

下面的鏈接，我所看到的，用Safari瀏覽器對比的Firefox視頻：

http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov

來源

2017-07-20 Auroratide

嘗試增加

-webkit-transition: width 128ms linear, height 128ms linear;

-webkit-是指諸如Chrome和Safari之類的瀏覽器，所以希望能夠解決您遇到的問題。

來源

2017-07-20 15:17:49 MHamer5

它仍然存在這個問題）：我剛纔在我的文章中上傳了一個視頻，顯示了我在Firefox和Safari中看到的內容。另外，我嘗試完全刪除轉換，但仍遇到同樣的問題，儘管程度較低。 – Auroratide

啊，我看到現在的問題是什麼，我認爲這是實際的轉換效果不起作用（不是定位問題）。你發佈的答案是否解決了這個問題？ – MHamer5

是的，它的確如此。感謝您看看它！ – Auroratide

看來，下面的CSS修復此：

.icon-button { 
    position: relative; 
} 

.icon-button button { 
    position: absolute; 
    top: 0; left: 0; 
}

我還沒有真正知道什麼在Safari是怎麼回事，但它似乎相對於鄰近單元的大小定位問題一直（我注意到這個問題並不是孤立地出現在按鈕上的）。絕對定位保證了元素只根據父元素定位，所以我猜這就是爲什麼這能解決問題。

來源

2017-07-20 17:24:58 Auroratide

在Safari中懸停按鈕的位置

回答

相關問題