Why is transition on 'margin' and 'padding' laggy in webkit browsers? Why is transition on 'margin' and 'padding' laggy in webkit browsers? google-chrome google-chrome

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 :

Demo

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.