Chrome中的CSS抖动/抖动错误？居中div上的宽度过渡

Kevin M 发表于 Dev

凯文·M

我有一个居中的div图层，使用margin: 0 auto，固定宽度为width: 1000px，width: 100%开始向下滚动时会变宽，并进行过渡以使其看起来不错。

问题是，过渡期间某些内容开始抖动和抖动。我说了一些内容，因为例如图像抖动，而H1文本则不行。这仅在Chrome和Edge中发生。（在Windows 10上测试）。

经过研究，我发现Chrome过去在不使用硬件加速时遇到过过渡问题，从而导致闪烁。据我了解，这已经由Google两年多以前解决了。

我尝试实现各种变通办法，试图触发硬件加速，但是没有任何效果。

根据我到目前为止的了解，仅当使用margin: 0 auto固定宽度的div层居中并将该元素转换为时，才会发生此抖动/抖动问题width: 100%。

一个奇怪的问题是，当在JSFiddle中重新创建演示代码时，我似乎不能总是在系统上重现它。

这是JSFiddle：https ://jsfiddle.net/aobrien/vc4n8ecy/

只需向下滚动并注意chrome徽标如何晃动即可。您可能需要上下滚动才能注意到它，具体取决于屏幕尺寸。

注意：只有在屏幕宽度大约为1700px或更高时，此选项才似乎可见，因此请确保您的浏览器为全角。将浏览器窗口缩放到80％也会触发此问题。

//jQuery to add sticky class when scrolling

$(window).scroll(function() {
  if ($(this).scrollTop() > 1) {
    $('.header').addClass("sticky");
  } else {
    $('.header').removeClass("sticky");
  }

});

body {
  height: 2000px;
}

.header {
  background: #335C7D;
  margin: 0 auto;
  width: 1000px;
  transition: width .6s ease;
  height: 200px;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  will-change: width;
}

.wrap {
  width: 1000px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <div class="wrap">
      <img src="https://i.stack.imgur.com/iaYsc.png" />
      <h1> Hello World.</h1>
    </div>
  </div>
</div>

这似乎是通过过渡实现全宽粘性菜单的非常简单直接的方法。

可能是margin: 0 auto随着宽度的变化使用而导致重新计算居中的div层的问题吗？

到目前为止，我为解决此问题或找到解决方法所做的所有尝试均告失败。

凯文·M

看来我找到了一种解决方案。

添加display: table;到使用该transition属性的元素，似乎可以消除抖动。

//jQuery to add sticky class when scrolling

$(window).scroll(function() {
  if ($(this).scrollTop() > 1) {
    $('.header').addClass("sticky");
  } else {
    $('.header').removeClass("sticky");
  }

});

body {
  height: 2000px;
}

.header {
  background: #335C7D;
  margin: 0 auto;
  width: 1000px;
  transition: width .6s ease;
  height: 200px;
  display: table; /* this seems to fix it */
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  will-change: width;
}

.wrap {
  width: 1000px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <div class="wrap">
      <img src="https://i.stack.imgur.com/iaYsc.png" />
      <h1> Hello World.</h1>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。