为什么 webkit 浏览器中'margin'和'padding'的转换滞后？

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和display变为inline-block稍微降低了延迟。有什么问题吗?

Answer 1

一种变通方法是在背景色的伪元素上应用过渡，并在悬停时缩放。这样，文本将保持"未过渡"并且不会晃动:

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获取更多信息。