滚动时内容跳跃

Question

我有一个使用flexbox设计的简单导航栏，如下所示：

<div id="nav-bar">

   <div class="nav-left">
       <div class="logo-contain">
               <img class="red visible" src="image01">
               <img class="white transparent" src="image02">
       </div>
   </div>
   <div class="nav-center">
       <ul>
           <li class="color01">01</li>
           <li class="color02">02</li>
           <li class="color03">...</li>
       </ul>
   </div>
   <div class="nav-right">
       <div class="box-panier"></div>
   </div>

</div>

我做了一个非常简单的脚本，可以在滚动时更改导航栏的颜色，并且可以正常工作。问题在于，当调用该脚本时，导航栏确实会像预期的那样发生变化，但是img元素移至错误的位置。它本应位于左侧导航块的中心，但要跳到该块的右侧。但是，如果我打开chrome devtools并仅更改css中的任何内容（例如取消选中/检查任何css propretie），我的img元素就会更新并返回到正确的位置，居中。因此，在调用我的脚本时，chrome似乎无法很好地更新CSS。

这是jsfiddle中完全相同的代码，例如在这里工作得很好。我真的不知道出什么问题了，因为在我的网站上使用完全相同的代码无法正常工作。

> JSfiddle code