当使用转换旋转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属性时，如何避免悬停转换时出现振动边框问题？

回答

相关问题