CODEWITHSUNDEEP
htmlcss
Sachin
Sachin

Reputation: 1698

How to avoid text jerk while scaling anchor in css transition?

I am trying increase scaling of links items while hovering over them with the help of CSS3 transition and scale(). Everything goes well except one annoying issue - the text within anchor elements increases with an ugly jerk which ruins the beauty of this cool effect. If you run the below code, you will see weird text shaking issue while hovering over pagination link. How can we prevent it from happening so?

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

Upvotes: 2

Views: 2342

Answers (1)

tao
tao

Reputation: 90068

The fix for this is adding 

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

... to your CSS.

However, in your case, because the font is too small and thin, you'll still experience some jump in anti-aliasing, due to sub-pixel rendering at the end of the transform effect. The only effective solution for this case (if changing font-family or font-weight are not acceptable), is to change the font-size to decimal pixels until you find a value where the effect is less visible.

font-size: 14.5px;

... seems to be an improvement in your case. Fiddle here.

Upvotes: 4

Related Questions