Icons wackeln, während Element erweitert wird

Question

Ich habe eine Kopfzeile erstellt, die klebrig wird, und wenn es tut - es wechselt von seiner festen Breite auf die volle Breite von der Mitte.

Aus irgendeinem Grund wackeln die Symbole auf seltsame Weise, wenn der Übergang stattfindet.

Noch seltsamer ist, dass sie nur bei bestimmten Breiten wackeln, wenn Sie also nicht sehen können, wovon ich rede - versuchen Sie, die Breite des Fensters zu variieren.

Hier ist der Code:

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

Wie kann ich das Schütteln stoppen?

Answer 1

Teillösung

ich es geschafft, die Ursache des Problems herauszufinden und es teilweise zu beheben. Was ich mir ausgedacht habe, ist nicht perfekt, aber es macht die Arbeit ziemlich gut.

---

Das Problem ist, wenn die Breite des Bildschirms eine ungerade Zahl ist. In diesem Fall bewegen sich die Symbole bei dem Übergang um ein Pixel zu jeder Seite, da sie nicht mit einem halben Pixel zentriert werden können.

Dies passiert häufiger unter Windows, da unter Windows die Bildlaufleiste eine ungewöhnliche Breite über die Breite des Bildschirms nimmt. Zum Beispiel ist meine Auflösung 1920px breit, und die Bildlaufleiste nimmt 17px auf, so dass die Fensterbreite bei 1903px bleibt.

---

Um es zu beheben, fügte ich ein Skript hinzu, das überprüft, ob die Fensterbreite ungerade ist. Wenn ja, verkürzt es die transition-wrapper um ein Pixel (in diesem Fall ist die transition-wrapper die wrapper).

Hier ist sie:

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

Das einzige Problem ist jetzt nach dem Übergang stattfindet, der Wrapper zurückkehren muss es ist voller Breite, so gibt es einen einen Pixel Sprung von der ganzen Sache.

Das ist OK, denke ich, aber wenn jemand eine bessere Lösung ohne diesen Sprung hat, würde ich es gerne hören. Ich stimme dieser Antwort immer noch nicht zu, weil sie unvollkommen ist.

---

Update:

den zusätzlichen right Wert -1px statt 1px Ändern löst tatsächlich die wackelnde vollständig. Ich habe keine wirklich gute Erklärung, aber ich nehme es.

Answer 2

Wenn Sie die transition von all in nur background-color und width ändern, stoppt das Wackeln. Fügen Sie den Übergang nur zu den Elementen hinzu, die sich während des Übergangs ändern.

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

auch, fügen Sie diese an die .img-wrapper

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

Meine aktualisiert JSFiddle es Arbeit zu sehen.