为什么过渡到边缘＆＃39;和＆＃39;填充＆＃39; webkit浏览器中的延迟？

Question

我尝试在margin和padding属性上应用CSS转换。

我想在悬停时使背景视觉效果更大。所以我在悬停时增加了填充并相应地减少了边距，因此文本将保留在当前位置。

这是代码

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

当你运行你可以看到的代码时，转换是滞后的，文本会在悬停时产生一个混蛋。

但是，它只发生在Chrome，Safari，Opera和其他webkit浏览器中。 它在Firefox和IE中运行良好。

P.S：将a.btn s display改为inline-block会略微减少延迟。可能是什么问题？

Answer 1

解决方法是在具有背景颜色的伪元素上应用转换，并在悬停时缩放它。这样，文本仍然是“未转换的”，不会摆动：

<强> 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);
}

您应该包含transition和transform CSS属性的供应商前缀，请查看CanIUse以获取更多信息。