html - 当元素扩展时，图标会抖动

我创建了一个变得很粘的标头，当它粘上时，它从固定宽度过渡到从中心到整个宽度。

由于某种原因，在过渡发生时，图标会以一种奇怪的方式来回跳动。

甚至更奇怪的是，它们只能以一定的宽度摇动，因此，如果您看不到我在说什么，请尝试更改窗口的宽度。

这是代码：

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

如何停止摇晃？

最佳答案

如果将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以查看其工作原理。