Gofilord Gofilord - 5 months ago 5x
HTML Question

Icons jiggle while element is expanding

I have created a header that becomes sticky, and when it does - it transitions from its fixed width to full width from the center.

For some reason, the icons jiggle in a weird fashion as the transition occurs.

What's even weirder is that they only jiggle at certain widths, so if you can't see what I'm talking about - try varying the width of the window.

Here's the code:


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

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

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


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

How do I stop the shaking?


Partial Solution

I managed to figure out the source of the problem and partially fix it. What I'v come up with is not perfect, but it pretty much gets the job done.

The problem is when the width of the screen is an odd number. In that case, as the transition occurs, the icons move one pixel to each side because they can't be centered with half a pixel.

This happens more frequently on Windows because on Windows the scrollbar takes up an odd width off the width of the screen. For example, my resolution is 1920px wide, and the scrollbar takes up 17px, so that leaves the window width at 1903px.

To fix it, I added a script that checks if the window width is odd. If so, it shortens the transition-wrapper by one pixel (in this case, the transition-wrapper is the wrapper).

Here it is:

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

The only problem now is after the transition takes place, the wrapper needs to return to it's full width, so there is a one pixel jump of the whole thing.

That's OK I guess, but if anyone has a better solution without that jump, I would love to hear it. I'm still not approving this answer because it's imperfect.


Changing the added right value to -1px instead of 1px actually solves the jiggling completely. I don't really have a good explanation, but I'll take it.