带有过滤器的滞后峰值：仅在Chrome中为drop-shadow（）

Question

我在活动标题链接上使用filter: drop-shadow()并结合了背景渐变和background-clip: text（因此，不能使用text-shadow，因为它会在渐变前面呈现）。我还使用了scrollspy来更新标题链接并指出当前处于活动状态的链接。但是，这只会在Chrome中产生较大的滞后峰值。它可以与Edge和Firefox正常运行。为什么会这样以及如何预防。 （我已经使用will-change: transform将渲染图推送到GPU。

可以在 beta.jonaskohl.de

上查看实时示例

---

编辑

下面是相关代码的片段。 但是，我无法在代码段中重现该问题。这只会在我的真实页面上发生。

document.querySelectorAll(".link").forEach(lnk => {
  lnk.addEventListener("click", ev => {
    ev.preventDefault()
  })
})

addEventListener("scroll", () => {
  const sections = document.querySelectorAll(".section")
  for (let i = sections.length; i-- > 0;) {
    const sec = sections[i]
    const rect = sec.getBoundingClientRect()
    if (window.scrollY + window.innerHeight / 2 >= rect.y + window.scrollY) {
      document.querySelectorAll(".active.link").forEach(lnk => {
        lnk.classList.remove("active")
      })
      document.querySelectorAll(".link")[i].classList.add("active")
      break
    }
  }
})

body {
  margin: 0;
}

#link-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  padding: 0;
  background-color: #ddd;
  list-style: none;
  margin: 0;
}

.link {
  display: block;
  padding: 16px;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

.link.active {
  filter: drop-shadow(0 0 8px #00f);
  color: #00f;
}

.section {
  padding-top: 20vh;
  box-sizing: border-box;
  height: 100vh;
  background-image: linear-gradient(#ccf, #eef);
}

<ul id="link-list">
  <li><a href="#" class="active link">Link 1</a></li>
  <li><a href="#" class="link">Link 2</a></li>
  <li><a href="#" class="link">Link 3</a></li>
  <li><a href="#" class="link">Link 4</a></li>
  <li><a href="#" class="link">Link 5</a></li>
</ul>

<div class="section" id="sec1">Section 1</div>
<div class="section" id="sec2">Section 2</div>
<div class="section" id="sec3">Section 3</div>
<div class="section" id="sec4">Section 4</div>
<div class="section" id="sec5">Section 5</div>