Wie können wir bei Verwendung der CSS-Eigenschaft "route transformieren" verhindern, dass der schwebende Rand beim Hover-Übergang entsteht?

Question

Ich versuche, ein Element auf der rechten Seite der Seite zu beheben, drehen Sie es um 90 Grad mit der Eigenschaft Transform rotieren CSS, dann bei Hover Ich möchte das Element nach links mit einem langsamen Übergang gleiten. Allerdings gibt es einen unschönen vibrierenden oberen Rand, wenn ich eine grundlegende Implementierung davon in Chrome versuche.

Bug Demo Page

Das Problem scheint nur zu geschehen, wenn der Text in dem Elemente eingegeben wird, und tritt nur auf, wenn das Element dynamisch mit diesem Text bemessen ist. Dies führt zu der Annahme, dass die transform -Eigenschaft während des Hover-Übergangs um ein Pixel auf- und abrundet, was dazu führt, dass sich das Element während des Überganges leicht ändert.

Ich kann dieses Problem umgehen, indem Sie eine feste Breite für das Element festlegen, aber das Festlegen der Breite des Elements ist in diesem Fall keine akzeptable Lösung, da der Text innerhalb dieses festen Elements variieren kann.

Hat jemand Ideen zum Verhindern oder Umgehen dieses Problems? Vielen Dank!

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

Ich glaube, die Animation etwas sauberer ist transform: translateY() mit dem Element zu bewegen (anstatt right: 10px von Animieren):

#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>