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

Question

I tried to apply CSS transition on margin and padding property.

I wanted to make the background visually larger on hover. So I increased the pad

Answer 1

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.