CSS's scroll snap messes with logo color change over section

Question

I've used midnight.js for changing logo color over section. It's working the way its intended to. But when I implement css scroll snap the color changing is lagging. It looks like 1 second.

Demo:
With scroll snap: https://logo-scroll-test.webflow.io/
Without scroll snap: https://logo-scroll-test.webflow.io/demo-1

If there is any other solutions rather than midnight to make this work, I'll have no problem changing :)

JSFiddle: https://jsfiddle.net/sebastian_UA/2L0v1rs7/30/

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;}

Script

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