Why is transition on 'margin' and 'padding' laggy in webkit browsers?
A workaround would be to apply the transition on a pseudo element with the background color and scale it on hover. This way, the text remains "untransitioned" and won't wiggle :
CSS :
a.btn { position:relative; color: #fff; text-decoration: none; font-size: 35px; padding: 10px; text-shadow: 2px 2px 2px #696969;}a.btn:before{ content:''; position:absolute; top:0; left:0; border-radius: 5px; width:100%; height:100%; background-color: #5C9E42; z-index:-1; -webkit-transition: all .3s ease; transition: all .3s ease;}a.btn:hover:before { background-color: #23570E; -webkit-transform: scaleX(1.1) scaleY(1.2); -ms-transform: scaleX(1.1) scaleY(1.2); transform: scaleX(1.1) scaleY(1.2);}
You should include vendor prefixes for transition
and transform
CSS properties, check CanIUse for more info.