圖標在元素擴展時抖動

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

部分解決方案

我設法弄清問題的根源並部分解決問題。我所提出的並不完美，但它完成了很多工作。

---

問題是當屏幕的寬度是一個奇數。在這種情況下，隨着轉換的發生，圖標會向一側移動一個像素，因爲它們不能以半個像素爲中心。

在Windows上發生這種情況的頻率更高，因爲在Windows上滾動條佔用屏幕寬度的奇數寬度。例如，我的分辨率爲1920px寬，滾動條佔用17px，因此窗口寬度爲1903px。

---

爲了修正它，我添加一個腳本來檢查如果窗口寬度爲奇數。如果是這樣，它將transition-wrapper縮短一個像素（在這種情況下，transition-wrapper是wrapper）。

這就是：

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

唯一的問題是現在發生轉變後，包裝就需要返回到它的全寬，所以整個事情的一個像素的跳躍。

沒關係我想，但如果任何人有一個更好的解決方案沒有跳躍，我很樂意聽到它。我仍然不贊同這個答案，因爲它不完美。

---

更新：

更改添加right價值-1px代替1px實際上解決了完全輕搖。我沒有一個很好的解釋，但我會接受。

Answer 2

如果將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看到它的工作。