Пики отставания с фильтром: drop-shadow () только в Chrome - PullRequest
Новая
       44

Пики отставания с фильтром: drop-shadow () только в Chrome

0 голосов
/ 15 февраля 2019

Я использую filter: drop-shadow() для активных ссылок заголовка в сочетании с фоновым градиентом и background-clip: text (таким образом, text-shadow не может быть использовано, так как он будет отображаться перед градиентом).Я также использую scrollspy, чтобы обновить ссылки заголовка и указать текущую активную.Это, однако, приводит к большим скачкам задержки только в Chrome.Он отлично работает с Edge и Firefox.Почему это и как это можно предотвратить.(Я уже отправляю рендеринг на графический процессор, используя will-change: transform.

Живой пример можно посмотреть по адресу 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>
...