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 padding and decreased the margin accordingly on hover, so that the text will remain on their current position.

Here's the code

.content {
    width: 600px;
    margin: auto;
}

a.btn {
    background-color: #5C9E42;
    color: #fff;
    text-decoration: none;
    font-size: 35px;
    border-radius: 5px;
    padding: 10px;
    text-shadow: 2px 2px 2px #696969;
    transition: all 0.3s ease;
}

a.btn:hover {
    background-color: #23570E;
    padding: 20px;
    margin: -10px;
}

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <a href="#" class="btn">Bello! How are you doing?</a>
</div>

When you run the code you can see, the transition is laggy and the text gives a jerk on hover.

However, it only happens in Chrome, Safari, Opera and other webkit browsers. It's working fine in Firefox and IE though.

P.S: Making a.btns display to inline-block slightly reduced the lag. What could be the issue?

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.