为什么在webkit浏览器上的“margin”和“padding”滞后的过渡？ [英] Why is transition on 'margin' and 'padding' laggy in webkit browsers?

问题描述

我尝试对 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 =内容> < 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！ < / a>< / div>  

但是，它只会发生在Chrome，Safari和Opera和其他webkit浏览器。
在Firefox和IE中可以正常工作。

PS：制作 a.btn s 显示到 inline-block 稍微减少滞后。可能的问题是什么？

解决方案

解决方法是将转换应用到具有背景颜色的伪元素，悬停。这样，文字仍保持未转换，并且不会扭动：

演示

  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％;高度：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 更多信息。

I tried to apply CSS transition on margin and padding property.

I wanted to make the background visually larger on hover. So I increased the padding and decreased the margin accordingly on hover, so that the text will remain on their current position.

Here's the code

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

When you run the code you can see, the transition is laggy and the text gives a jerk on hover.

However, it only happens in Chrome, Safari, Opera and other webkit browsers. It's working fine in Firefox and IE though.

P.S: Making a.btns display to inline-block slightly reduced the lag. What could be the issue?

解决方案

A workaround would be to apply the transition on a pseudo element with the background color and scale it on hover. This way, the text remains "untransitioned" and won't wiggle :

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

You should include vendor prefixes for transition and transform CSS properties, check CanIUse for more info.

这篇关于为什么在webkit浏览器上的“margin”和“padding”滞后的过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！