當使用轉換旋轉CSS屬性時，如何避免懸停轉換時出現振動邊框問題？

我試圖修復一個元素到頁面的右側，使用變換旋轉CSS旋轉90度屬性，然後懸停我想要元素使用緩慢的過渡向左滑出。但是，當我在Chrome中嘗試基本實現這一點時，會出現難看的振動上邊框。當使用轉換旋轉CSS屬性時，如何避免懸停轉換時出現振動邊框問題？

Bug Demo Page

的問題似乎只能當元素被輸入的文本發生，而當元素動態與文本大小隻發生。這使我相信，在懸停轉換期間，transform屬性會上下左移一個像素，導致元素在緩動轉換期間不規則地調整大小。

我可以通過在元素上設置固定寬度來解決此問題，但在此情況下固定元素的寬度不是可接受的解決方案，因爲文本可以在此固定元素內發生變化。

有沒有人有預防或解決此問題的想法？謝謝！

HTML

<a id="right_fixed_element"> 
    Fixed Side Button 
</a>

CSS

#right_fixed_element { 
/* vibrating border bug goes away with fixed width */ 
/* width: 150px; */ 
    position: fixed; 
    top: 40%; 
    right: 0; 
    padding: 10px; 
    color: white; 
    background-color: red; 
    border: 1px solid #777; 
    transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -webkit-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform: rotate(-90deg) translateZ(0) scale(1.0, 1.0); 
} 
#right_fixed_element:hover { 
    right: 10px; 
}

來源

2016-07-05 Mitch Downey

我認爲動畫是用transform: translateY()移動的元素（而不是動畫right: 10px）少許清潔劑：

#right_fixed_element { 
 
/* vibrating border bug goes away with fixed width */ 
 
/* width: 150px; */ 
 
    position: fixed; 
 
    top: 40%; 
 
    right: 0; 
 
    padding: 10px; 
 
    color: white; 
 
    background-color: red; 
 
    border: 1px solid #777; 
 
    transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 
#right_fixed_element:hover { 
 
    transform: rotate(-90deg) translateY(-10px); 
 
    -ms-transform: rotate(-90deg) translateY(-10px); 
 
    -moz-transform: rotate(-90deg) translateY(-10px); 
 
    -webkit-transform: rotate(-90deg) translateY(-10px); 
 
    
 
}

<!-- When you hover over this transform-rotated element with the slow transition speed, a buggy vibrating behavior appears at the top of the element. 
 

 
If you set a fixed width on the element, then the vibrating behavior will go away. 
 

 
How can we prevent the vibrating bug, without setting a fixed width, while still acheiving the transform on this fixed element? 
 
--> 
 

 
<a id="right_fixed_element"> 
 
    Fixed Side Button 
 
</a>

來源

2016-07-06 01:58:54

哦，不錯，我沒有想到！如果這通過瀏覽器測試，我會將此答案標記爲正確。 –

您的解決方案效果很好。謝謝！ –

當使用轉換旋轉CSS屬性時，如何避免懸停轉換時出現振動邊框問題？

回答

相關問題