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>

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

---

如何停止抖动？

如果您将

转换

从

全部

更改为仅

背景色

和

宽度

，抖动将停止。尝试仅将转换添加到转换期间更改的元素

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

另外，将其添加到

.img包装中

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

请查看我的更新版本以查看其工作情况。

部分解决方案 我设法找出了问题的根源并部分解决了它。我的想法并不完美，但它基本上完成了任务

---

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

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

---

为了修复它，我添加了一个脚本来检查窗口宽度是否为奇数。如果是这样，它将

转换包装

缩短一个像素（在这种情况下，

转换包装

就是

包装

）

这是：

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

现在唯一的问题是在转换发生后，包装器需要返回到其全宽，因此整个内容有一个像素的跳跃

我想这没关系，但如果有人有一个更好的解决方案，而不是跳转，我很乐意听到它。我仍然不赞成这个答案，因为它不完美

---

更新：

---

将添加的

right

值改为

-1px

，而不是

1px

，实际上完全解决了抖动问题。我没有很好的解释，但我接受了。

抖动是由于像素大小不规则造成的。例如，如果您的浏览器是5px宽，而您希望将某个东西置于2px的中心，则不可能。它将向左或向右关闭1px。这是发生在你身上的事情的简化版本。@kthornbloom是的，当过渡发生时，图标从左向右移动，直到完成为止。你知道如何修复它吗？如果你想从宽度看动画，看看他的JSFIDLE。@Garric15谢谢你的提醒，更新了我的小提琴。@Roy谢谢你的快速回答。然而，你的建议并没有解决问题。如果你改变宽度几次，你会注意到图标仍然在抖动。取消

宽度上的转换可以解决问题，但我必须让宽度扩展。@Gofilord您检查过我的JSFIDLE吗？是的。你试过改变小提琴的宽度吗？值得一提的是，我注意到这个问题在Windows上更为常见，而在Mac上则不太常见。