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

Question

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

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

这是代码

.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

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

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了解更多信息。