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

Question

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

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

做了一些研究，我发现 Chrome 过去在不使用硬件加速时存在过渡问题，导致闪烁。据我了解，谷歌已经在 2 年前解决了这个问题。

我尝试了各种解决方法，尝试触发硬件加速，但没有任何效果。

从我目前了解到的情况来看，这种抖动/晃动问题仅发生在 div 层使用具有固定宽度的margin: 0 auto 居中，然后该元素转换为width: 100% 时。

一个奇怪的问题，在 JSFiddle 中重新创建演示代码时，我似乎无法始终在我的系统上重现它。

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

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

注意：这似乎仅在您的屏幕宽度约为 1700 像素或更高时才可见，因此请确保您的浏览器处于全宽状态。将浏览器窗口缩放到 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 层出现问题？

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

Answer 1

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

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