Question

我使用margin: 0 auto设置了一个居中的div图层，其固定宽度为width: 1000px，在开始向下滚动时会显示width: 100%，同时还会进行转换以使其看起来不错

问题是，某些内容在转换过程中开始抖动和抖动。我说一些内容，因为例如图像抖动，而H1文本没有这只发生在Chrome和Edge中。（在Windows 10上测试）。

做了一些研究，我发现Chrome在过去没有使用硬件加速时会发生转换，导致闪烁。根据我的理解，Google已经在2年前解决了这个问题。

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

根据我到目前为止所学到的，这种抖动/抖动问题只发生在使用具有固定宽度的margin: 0 auto居中的div层并且该元素随后转换为width: 100%时。

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

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

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

注意：当屏幕宽度大约为1700像素或更高时，这似乎只是可见，因此请确保您的浏览器是全宽的。将浏览器窗口缩放到80％也会触发问题。

＆＃13;

//jQuery to add sticky class when scrolling

$(window).scroll(function() {
  if ($(this).scrollTop() > 1) {
    $('.header').addClass("sticky");
  } else {
    $('.header').removeClass("sticky");
  }

});

＆＃13;

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

＆＃13;

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

＆＃13;

这似乎是通过转换实现全宽度粘性菜单的非常简单和直接的方式。

使用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>

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

1 个答案: