Wie vermeidet man einen Textruck beim Skalieren des Ankers im CSS-Übergang?

Question

Ich versuche, die Skalierung von Elementen der Elemente zu erhöhen, während ich mit Hilfe von CSS3-Übergang und scale() über sie schwebe. Alles geht gut, außer einem nervigen Problem - der Text in den Ankerelementen nimmt mit einem hässlichen Ruck zu, der die Schönheit dieses coolen Effekts ruiniert. Wenn Sie den unten stehenden Code ausführen, wird beim Bewegen des Mauszeigers über den Seitenumbruch-Link ein merkwürdiges Text-Schütteln-Problem angezeigt. Wie können wir verhindern, dass es so geschieht?

\t .pagination { 
 
\t \t font-family:Arial, Helvetica, sans-serif; 
 
\t \t font-size:14px; 
 
\t \t text-align:center; 
 
\t } 
 
\t 
 
\t .pagination a { 
 
\t \t padding:8px 16px; 
 
\t \t margin:0 4px; 
 
\t \t border:1px solid #ddd; 
 
\t \t text-decoration:none; 
 
\t \t color:#000000; 
 
\t \t display:inline-block; 
 
\t \t -webkit-transition:all 0.3s ease; 
 
\t \t -o-transition:all 0.3s ease; 
 
\t \t -moz-transition:all 0.3s ease; 
 
\t \t transition:all 0.3s ease; 
 
\t } 
 
\t 
 
\t .pagination a:hover { 
 
\t \t background-color:#ddd; 
 
\t \t -webkit-transform:scale(1.5); 
 
\t \t -ms-transform:scale(1.5); 
 
\t \t -o-transform:scale(1.5); 
 
\t \t -moz-transform:scale(1.5); 
 
\t \t transform:scale(1.5); 
 
\t } 
 
\t 
 
\t .pagination span.current { 
 
\t \t padding:8px 16px; 
 
\t \t margin:0 4px; 
 
\t \t border:1px solid #4CAF50; 
 
\t \t background-color:#4CAF50; 
 
\t \t color:#FFF; 
 
\t } 
 
\t 
 
\t .pagination span.disabled { 
 
\t \t padding:8px 16px; 
 
\t \t margin:0 4px; 
 
\t \t border:1px solid #EEE; 
 
\t \t color:#DDD; 
 
\t \t /*display:none;*/ 
 
\t }

<div class="pagination"> 
 
    <span class="disabled">&laquo; Prev</span> 
 
    <span class="current">1</span> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a href="#">4</a> 
 
    <a href="#">5</a> 
 
    <a href="#">6</a> 
 
    <a href="#">7</a> 
 
    <span>...</span> 
 
    <a href="#">19</a> 
 
    <a href="#">20</a> 
 
    <a class="next" href="#">Next &raquo;</a> 
 
</div>

Answer 1

Die Lösung für dieses ist das Hinzufügen

.pagination { 
    -webkit-transform: translateZ(0); 
     -moz-transform: translateZ(0); 
      transform: translateZ(0); 
} 

.pagination a { 
    -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
      backface-visibility: hidden; 
    -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
      transform-style: preserve-3d; 
} 

... zu Ihrem CSS.

In Ihrem Fall jedoch, weil die Schriftart zu klein und dünn ist, werden Sie immer noch einige Anti-Aliasing springen, aufgrund von Sub-Pixel-Rendering am Ende des transform Effekts. Die einzige effektive Lösung für diesen Fall (wenn die Änderung font-family oder font-weight nicht akzeptabel ist), ist die font-size in dezimale Pixel zu ändern, bis Sie einen Wert finden, wo der Effekt weniger sichtbar ist.

font-size: 14.5px; 

... scheint in Ihrem Fall eine Verbesserung zu sein. Geige here.