CSS Scroll Snap导致Logo跨区块颜色切换延迟问题求助

我使用midnight.js实现Logo在不同区块间的颜色切换，原本功能正常，但添加CSS Scroll Snap后，颜色切换出现约1秒的延迟。我也接受除midnight.js之外的其他解决方案。

HTML代码 #

<!-- loading midnight -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/midnight.js/1.1.2/midnight.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<div class="scroll-snap-wrapper">
<!-- fixed logo -->
<a href="#" class="fixed w-inline-block">
    <div class="html-embed w-embed"><svg width="100px" height="100px" viewbox="0 0 69 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="logo-brown" class="color-fill" fill="#ffffff" fill-rule="nonzero">
            <path d="M38,38 L38,57 L19,57 L19,38 L38,38 Z M19,19 L19,38 L0,38 L0,19 L19,19 Z M57,19 L57,38 L38,38 L38,19 L57,19 Z M38,0 L38,19 L19,19 L19,0 L38,0 Z" id="Combined-Shape"></path>
          </g>
        </g>
      </svg>
     </div>
  </a>

<section></section>
<section data-midnight="dark"></section>
<section></section>
<section data-midnight="dark"></section>
</div>

CSS代码 #

body {
  margin: 0;
  padding: 0;
}

section {
  background: #ffffff;
  height:100vh;
}

.scroll-snap-wrapper {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.scroll-snap-wrapper sections {
    scroll-snap-align: start;
}

.fixed {
  position: fixed;
  z-index: 100;
}

section:nth-child(even) {
  background: #000000;
}

/* Logo color change */
.midnightHeader.dark .color-fill {fill: #000000;}
.midnightHeader.default .color-fill {fill: #ffffff;}

JavaScript代码 #

// Start midnight
$(document).ready(function(){
  // Change this to the correct selector.
  $('.fixed').midnight();
});

内容的提问来源于stack exchange，提问作者Sebastian