CODEWITHSUNDEEP
htmlcsstransform
Mitch Downey
Mitch Downey

Reputation: 917

When using the transform rotate CSS property, how can we prevent the vibrating border issue on hover transition?

I am trying to fix an element to the right side of the page, rotate it 90 degrees using the transform rotate CSS property, then on hover I want the element to slide out to the left using a slow transition. However, there is an unsightly vibrating top border when I try a basic implementation of this in Chrome.

Bug Demo Page

The issue only seems to happen when text is entered in the element, and only happens when the element is dynamically sized with that text. This leads me to believe the transform property is rounding up-and-down by a pixel during the hover transition, resulting in the element to resize erratically during ease transition.

I can work around this issue by setting a fixed width on the element, but fixing the width of the element is not an acceptable solution in this case because the text can vary within this fixed element.

Does anyone have ideas for preventing or working around this issue? Thank you!

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

Upvotes: 0

Views: 709

Answers (1)

Briley Hooper
Briley Hooper

Reputation: 1271

I believe the animation is little cleaner using transform: translateY() to move the element (instead of animating 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>

Upvotes: 1

Related Questions