使用 transform rotate CSS 属性时，我们如何防止悬停过渡时的振动边框问题？

Question

我正在尝试将一个元素固定在页面的右侧，使用 transform rotate CSS 属性将其旋转 90 度，然后在悬停时我希望元素使用缓慢的过渡向左滑出。但是，当我在 Chrome 中尝试对此进行基本实现时，会出现难看的振动顶部边框。

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;
}

Answer 1

我相信使用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>