部分解决方案

Question

我创建了一个变得粘稠的标题，当它变为粘性时，它会从固定宽度过渡到中心的全宽。

出于某种原因，随着过渡的发生，图标以一种奇怪的方式摇晃。

甚至更奇怪的是，他们只是以一定的宽度摇晃，所以如果你不能看到我正在谈论的内容 - 尝试改变窗户的宽度。

以下是代码：

HTML：

<header class="header">
  <div class="bg"></div>

  <div id="waypoint"></div>

  <nav class="nav" id="nav">
    <div class="wrapper">
      <div class="container">
        <ul>
          <li>
            <a href="#">
              <span class="img-wrapper">
                <img  src="https://www.saunderslandscaping.ca/images/icons/droplet.svg" alt="">
              </span> 
              <span>txt</span>
            </a>
          </li>
          // ... more items
       </ul>
      </div>
    </div>
  </nav>
</header>

CSS：

li {
  float: left;
  width: 20%;
  border-right: 1px solid black;
}

a {
  display: block;
  padding: 1em;
  text-align: center;
}

.img-wrapper {
  display: block;
}

.header {
  position: relative;
}

.nav {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.nav.sticky .wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  bottom: auto;
  background: #d0d0d0;
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  transition: 1s all ease;
}

.wrapper {
  width: 600px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

Here's a fiddle demoing the problem (try to change the width)

如何停止摇晃？

Answer 1

如果您将transition从all更改为background-color和width，则抖动就会停止。尝试仅将转换添加到转换期间更改的元素。

transition: 1s background-color ease, 1s width ease;

另外，将其添加到.img-wrapper

.img-wrapper {
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.0, 1.0);
}

查看我更新的JSFiddle，看它是否有效。

Answer 2

部分解决方案

我设法找出问题的根源并部分修复它。我提出的并不完美，但它几乎完成了工作。

问题是指屏幕宽度为奇数时。在这种情况下，当发生转变时，图标将一个像素移动到每一侧，因为它们不能以半个像素为中心。

这种情况在Windows上更频繁发生，因为在Windows上滚动条占据屏幕宽度的奇数宽度。例如，我的分辨率为1920px宽，滚动条占用了17px，因此窗口宽度保持在1903px。

为了解决这个问题，我添加了一个脚本来检查窗口宽度是否为奇数。如果是这样，它会将transition-wrapper缩短一个像素（在这种情况下，transition-wrapper是wrapper）。

这是：

if ($window.width() % 2 != 0)
  $transitionWrapper.css('right', '1px');

现在唯一的问题是转换发生后，包装器需要返回到它的全宽，所以整个事物只有一个像素的跳跃。

我猜是的，但是如果有人在没有跳跃的情况下有更好的解决方案，我很乐意听到它。我还没有批准这个答案，因为它不完美。

更新：

将添加的right值更改为-1px而不是1px实际上可以完全解决抖动问题。我没有真正的解释，但我会接受它。

元素展开时图标微动

2 个答案:

部分解决方案