html - 使用 transform rotate CSS 属性时，如何防止 hover transition 的振动边框问题？

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>