为什么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中运行良好.

PS:制作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和transformCSS属性,请查看CanIUse以获取更多信息.