为什么 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.btns 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 了解更多信息。